jQuery Parallax Tutorial – Animated Banner


/ Published in: jQuery
Save to your folder(s)

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.


Copy this code and paste it in your HTML
  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. }

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.