Posted By

jquery4u on 04/14/11


Tagged

jqueryparallaxanimation


Versions (?)

jQuery Parallax Tutorial – Animated Banner


 / Published in: jQuery
 

URL: http://www.jquery4u.com/animation/jquery-parallax-tutorial/

think we all agree that the parallax effect is pretty awesome and can get you that WOW factor when someone visits your website. So, I thought i would show you a live jQuery parallax example. In this tutorial i will explain in detail how to create your own parallax background effect using jQuery to manage the animation aspects of the banner.

  1. JQUERY
  2. jQuery(document).ready(function($) {
  3. jQuery('#parallax').jparallax();
  4. });
  5.  
  6. HTML
  7. <div id="parallax">
  8. <img src="grass.png" alt="" style="width:1200px; height:250px;"/>
  9. <img src="frog.png" alt="" style="width:500px; height:250px;"/>
  10. <img src="butterflies.png" alt="" style="width:1200px; height:300px;"/>
  11. </div>
  12.  
  13. CSS
  14. #parallax {
  15. position:relative; overflow:hidden; width:950px; height:250px;
  16. background-image:url('background.jpg');
  17. }

Report this snippet  

You need to login to post a comment.