Advanced Search

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.

Expand | Embed | Plain Text

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.