$(function () { $(".basic-usage").imagesequence({ src: 'anim_a.jpg', width: 1280, height: 720, loop: true, autoplay: true }); });
$(function () { $(".rewind").imagesequence({ src: 'anim_a.jpg', width: 1280, height: 720, rewind: true, loop: true, autoplay: true }); });
$(function () { var imagesequence = $(".controls").imagesequence({ src: 'anim_a.jpg', width: 1280, height: 720 }); $('.play').on('click', function(){ imagesequence.play(); }); $('.pause').on('click', function(){ imagesequence.pause(); }); $('.rewind-button').on('click', function(){ imagesequence.rewind(); }); });
$(function () { var imagesequenceevent = $("#events").imagesequence({ src: 'anim_a.jpg', width: 1280, height: 720, autoplay: true, loop: true, afterAnimation: function(){ console.log('end of animation'); } }); });
$(function () { $(".example-image-sequence").imagesequence({ path: 'sequence', extension: '.jpg', indexFrom: 1, indexTo: 122, loop: false, autoplay: false }); });
Importing a huge sequenced jpg or png probably won't work. The image generated on our side is more than 600.000 pixels long. Even Photoshop won't import it (max Photoshop size: 300.000px).
Images broken down to slices (these slices will be merged some more - to have six overall and not twelve) and we'll define breakpoints/divs for each slice, positioned absolutely with different z-indexes.
That's the idea for now.