JSignage:TableTutorial3

Description

Progressive reveal of cells

• It is possible to set a timeline for the start of each cell in the table using the delay attribute.
• This can be combined with in effects on the cells.

Source code

var scientists = [ 'Albert Einstein', 'Ernest Rutherford', 'Marie Curie', 'Max Planck', 'Niels Bohr', 'Robert Oppenheimer' ];

$.textArea({ height: '20%', fontSize: 40, fontWeight: 'bold', fill: 'black' }).text('Great atom scientists').addTo('svg');

$.table({
        top: '20%',
        rows: 2,
        columns: 3,
        delay: 1,
        data: scientists,        
        renderToSVG: function() {
          var uri = 'media/Atom_5_7/' + encodeURIComponent(this) + '.jpg';
          return $.g().add([
            $.image({ href: uri, height: '80%' }),
            $.textArea({ top: '80%', displayAlign: 'before', fontSize: 24 }).text(this)
          ]).fadeIn();
        }
}).addTo('svg');