Go back to Devrama.com

Demo. Elements Animation

Photo credit in slides
http://www.flickr.com/photos/rieorie/4277941123/
Some rights reserved by rieh
http://www.flickr.com/photos/sen_meister/4432435310/
Some rights reserved by Mario Spann
http://www.flickr.com/photos/clkg/4247776023/
Some rights reserved by alluréd
http://www.flickr.com/photos/instantvantage/6240134386/
Some rights reserved by Instant Vantage
http://www.flickr.com/photos/eschipul/265740754/
Some rights reserved by eschipul

Moving

Text
and Image

Fadein

Text
and Image
<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.devrama.slider.js"></script> <style type="text/css"> .example-animation { color: #FFF; font-size: 60px; } </style> </head> <body> <div class="example-animation"> <div data-lazy-background="images/4247776023_81a3f048ca_b.png"> <h3 data-pos="['0%', '110%', '0%', '5%']" data-duration="700" data-effect="move"> Moving </h3> <div data-pos="['-30%', '25%', '40%', '25%']" data-duration="700" data-effect="move"> Text </div> <div data-pos="['56%', '-40%', '56%', '11%']" data-duration="700" data-effect="move"> and Image </div> <div data-pos="['23%', '110%', '23%', '42%']" data-duration="700" data-effect="move"> <img data-lazy-src="http://www.gravatar.com/avatar/fe3f1273001cb2e9ed9c9b067fcb1fd4?s=200"/> </div> </div> <div data-lazy-background="images/4432435310_d5010f8efc_b.png"> <h3 data-pos="['0%', '8%']" data-duration="1000" data-effect="fadein"> Fadein </h3> <div data-pos="['44%', '15%']" data-duration="700" data-effect="fadein"> Text </div> <div data-pos="['66%', '11%']" data-duration="700" data-effect="fadein"> and Image </div> <div data-pos="['29%', '46%']" data-duration="700" data-delay="500" data-effect="fadein"> <img data-lazy-src="http://www.gravatar.com/avatar/fe3f1273001cb2e9ed9c9b067fcb1fd4?s=200"/> </div> </div> </div> <script type="text/javascript"> $(document).ready(function(){ $('.example-animation').DrSlider(); //Yes! that's it! }); </script> </body> </html>

data-pos: [start-top-position, start-left-position, end-top-position, end-left-position] or [end-top-position, end-left-position]
data-duration: Animation duration in milliseconds.
data-delay: Delay before start the animation in milliseconds.