A tiny JavaScript library to display fullscreen image sequences in the browser.
To keep the library light and simple there are actually 5 different versions
of it plus a benchmark test. They were built to test speed and will eventually
be dropped in future versions in favor of a single one.
The library consists of five files:
-
sequencer.bg.js
Displays the images as the body background. The images are stretched with
the CSS “auto”, “cover” and “contain” modes.
I didn’t find a way to pass an image object to the CSS background so this
version relies heavily on the browser’s cache.
→ Launch in a new window
-
sequencer.div.js
Displays the images as a stack of divs hiding and showing the corresponding
layer. This version relies a bit on the browser cache, but once loaded
the images are stored as a div background.
→ Launch in a new window
-
sequencer.canvas.js
Displays the images on a canvas object the size of the browser window.
The images are preloaded and then stretched and cropped on the canvas.
→ Launch in a new window
-
sequencer.canvas2.js
Displays the images on a canvas object the size of the first loaded image.
The canvas is then stretched and positioned correctly via css.
→ Launch in a new window
-
sequencer.canvas.async.js
Loads the sequence asynchronously.
It’s a messy work in progress right now, but loading times are 4-5 times faster.
This will eventually become the final version.
→ Launch in a new window
-
sequencer.benchmark.js
Image sequencer benchmark.
Not sure if this is reliable: it looks as though some browsers skip frames
to keep up with the interval event.
Best results so far on OS X are on Safari with the canvas version.
Firefox is very fast (99.8 fps!) with canvas on small windows sizes (smaller than 1000px wide); becomes very slow with bigger windows. It’s also slow with the background & div versions; slow DOM-manipulation I guess.
Chrome and Opera are surprisingly slow with both the canvas versions.
Some examples using Sequencer:
→ Stopmotion Experiments 1
→ Stopmotion Experiments 2
→ Download from github
→ View on github
