Object Movie Sprites
-
Directional
<img id='image' src='samples/logo.png' /> $('#image').reel({ speed: 1, opening: 1, frame: 3, delay: 3, directional: true }); /* `speed` 1 is one revolution per second (1 Hz). It is animated after 1 second long `opening` spin and a 3 second `delay`. */ #image { width: 130px; height: 60px; } <h3>Directional Sprite</h3> <div class="credits">image © <a href="mailto:petr@vostrel.cz">Petr Vostřel</a></div> -
Clockwise
<img id='image' src='samples/f1.jpg' /> $('#image').reel({ speed: -0.3, frames: 35, cw: true }); /* Unlike the other formula car sample this one's sprite is clockwise-organized. */ #image { width: 276px; height: 126px; } <h3>Clockwise Sprite</h3> <div class="credits">photo © <a href="mailto:syerik@seznam.cz">Erik Kluka</a></div> -
Non-Animated
<img id='image' src='samples/f1-ccw.jpg' /> $('#image').reel({ frames: 35, opening: 2, entry: 1 }); /* This one isn't fully animated, but has a 2 seconds long `opening` with `entry` speed of 1 Hz. */ #image { width: 276px; height: 126px; } <h3>Non-Animated Sprite</h3> <div class="credits">photo © <a href="mailto:syerik@seznam.cz">Erik Kluka</a></div> -
Multi-Row
<img id='image' src='samples/multi-row.png' /> $('#image').reel({ speed: 0.3, frames: 6, footage: 3, rows: 3, row: 2 }); /* Additionally custom class "bordered" (the dashed border) is applied on the IMG and is being preserved. */ #image { width: 100px; height: 100px; } <h3>Multi-Row Sprite</h3> <div class="credits">image © <a href="mailto:petr@vostrel.cz">Petr Vostřel</a></div>
Object Movie Sequences
-
Multi-Row
<img id='image' src='samples/mini.jpg' /> $('#image').reel({ frames: 20, frame: 14, rows: 6, row: 3, speed: 0.3, path: 'samples/mini/', images: /* Typing all 120 images would be tedious. Machine will do it. Function returns [ '001.jpg', '002.jpg', .. '120.jpg' ] */ ( function(){ var start= 1, every= 1, frames= 120, ext= 'jpg', length= 7, fill= '0', array= [] for( var i= start; i <= frames; i+= every ){ var name= [ i, ext ].join('.') while( name.length < length ) name= fill+name array.push( name ) } return array } )() }); #image { width: 200px; height: 200px; } <h3>Multi-Row Sequence</h3> <div class="credits">photo © <a href="mailto:masmith@photospherix.com">Matt Smith</a></div> -
Dual-Orbit
<img id='image' src='samples/phone.png' /> $('#image').reel({ footage: 10, cw: true, orbital: 3, inversed: true, speed: 0.7, path: 'samples/phone/', images: /* Typing all 20 images might be tedious. Machine will do it. Function returns [ '01.png', '02.png', .. '20.png' ] */ ( function(){ var start= 1, every= 1, frames= 20, ext= 'png', length= 6, fill= '0', array= [] for( var i= start; i <= frames; i+= every ){ var name= [ i, ext ].join('.') while( name.length < length ) name= fill+name array.push( name ) } return array } )() }); #image { width: 200px; height: 200px; } <h3>Dual-Orbit Sequence</h3> -
Slideshow
<img id='image' src='samples/badge-1.gif' /> $('#image').reel({ speed: 2, delay: 1, path: 'samples/', images: [ 'badge-1.gif', 'badge-2.gif', 'badge-3.gif', 'badge-4.gif' ] }); /* `delay` tells it to wait 1 second before starting to play */ #image { width: 120px; height: 30px; } <h3>Slideshow Sequence</h3> <div class="credits">image © <a href="mailto:petr@vostrel.cz">Petr Vostřel</a></div> -
Clockwise
<img id='image' src='samples/drone.png' /> $('#image').reel({ cw: true, frame: 32, speed: -0.2, path: 'samples/drone/', velocity: 3, brake: 0.2, images: /* Typing all all images might be tedious. Machine will do it. Function returns [ '00001.png', '00006.png', .. '00179.png' ] */ ( function(){ var start= 1, every= 5, frames= 179, ext= 'png', length= 9, fill= '0', array= [] for( var i= start; i <= frames; i+= every ){ var name= [ i, ext ].join('.') while( name.length < length ) name= fill+name array.push( name ) } return array } )() }); #image { width: 300px; height: 200px; } <h3>Clockwise Sequence</h3> <div class="credits">image © <a href="mailto:m.leidman@acegroup.lv">Mark Leidman</a></div>
Panoramas
-
Framed
<img id='image' src='samples/green.jpg' /> $('#image').reel({ frames: 32, footage: 4, speed: 0.1 }); #image { width: 200px; height: 150px; } <h3>Framed Panorama</h3> <div class="credits">photo © <a href="mailto:petr@vostrel.cz">Petr Vostřel</a></div> -
Click-Free Stitched
<img id='image' src='samples/stitched.jpg' /> $('#image').reel({ stitched: 1821, frames: 60, frame: 23, speed: -0.05, clickfree: true, wheelable: false }); /* This one also demonstrates the `wheelable` option, which makes it immune to mousewheel control */ #image { width: 297px; height: 167px; } <h3>Click-Free Stitched Panorama</h3> <div class="credits">photo © <a href="mailto:mr.thangnguyen@gmail.com">Tom Nguyen</a></div> -
Non-Looping Stitched
<img id='image' src='samples/chicago.jpg' /> $('#image').reel({ stitched: 1072, loops: false, steps: 30, step: 15, speed: -0.1, timeout: 1 }); #image { width: 270px; height: 150px; } <h3>Non-Looping Stitched Panorama</h3> <div class="credits">photo © <a href="mailto:g@miernicki.com">Greg Miernicki</a></div>