Parallax effect with JQuery and TweenMax (greensock)

This tutorial will demonstrate how to create a parallax effect with jquery and tweenMax for its animation needs.

Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines. The term is derived from the Greek παράλλαξις (parallaxis), meaning “alteration”. Nearby objects have a larger parallax than more distant objects when observed from different positions, so parallax can be used to determine distances.

So now that we know what it is, it fairly easy to create one right? Lets see how:

First of all we download and import the Greensock v12 javascript animation engine.

http://www.greensock.com/v12/

And the latest build of JQuery.

http://code.jquery.com/jquery-1.7.2.min.js

Next we create some basic html:

<div id="mainContainer">               
 <div id="mountains"></div>
 <div id="buildings"></div>
</div>

And we style them with the following rules:

#mainContainer{
width:1500px;
height:500px;
border:1px solid #ffffff;
position:absolute;
top:50%;
margin-top:-250px;
left:50%;
margin-left:-750px;
overflow:hidden;
float:left;
}

.animatingTile{

background-repeat:repeat-x;
float:left;
position:absolute;
width:3000px;
height:500px;
}

#mountains{
left:0px;
position:absolute;
bottom:0px;
background:url('mountains2.png');
z-index: 550;
background-repeat: repeat-x;
width:3200px;
height:191px;
}

#buildings{
width:3200px;
height:162px;
left:0px;
position:absolute;
bottom:0px;
background:url('buildings2.png');
z-index: 600;
background-repeat: repeat-x;
}

These rules make sure that the images are entered as background and they repeat enough times for the animation to work smoothly.
the .animatingTile is an element that will be inserted by javascript, lets see how:

First off we bind at the ready event with jquery:

$(document).ready(function(){});

next we initiate the function and pass the arguments of parent, speed, image:

createScrollingBackground("mainContainer",6,'cloudset.jpg');

Lets see what this mysterious function does:

function createScrollingBackground(parentID, speed, imgSource){
$('#'+parentID).append('

<div id="child1" class="animatingTile"></div>
');
$(".animatingTile").css({'background':'url('+imgSource+')'});

var lefty1 = $("#child1").position().left;
var tween1 = TweenMax.to($("#child1"),speed*4,{css:{left:lefty1-1500},repeatDelay:0,useFrames:false, repeat:-1,ease:Linear.easeNone});

var tweenMountains = TweenMax.to($("#mountains"),speed*2,{css:{left:-1600},repeatDelay:0,useFrames:false,repeat:-1,ease:Linear.easeNone});
var tweenBuildings = TweenMax.to($("#buildings"),speed,{css:{left:-1600},repeatDelay:0,useFrames:false,repeat:-1,ease:Linear.easeNone});

}

Lets break it down and see what we made here:

The first 2 lines create a new div inside the parent that gets the class “.animatingTile”

$('#'+parentID).append('

<div id="child1" class="animatingTile"></div>
');
$(".animatingTile").css({'background':'url('+imgSource+')'});

The next few lines actually initiate the effects, this is standard TweenMax declaration as described in the greenshock website and the docs here: http://api.greensock.com/js/

var lefty1 = $("#child1").position().left;
var tween1 = TweenMax.to($("#child1"),speed*4,{css:{left:lefty1-1500},repeatDelay:0,useFrames:false, repeat:-1,ease:Linear.easeNone});

var tweenMountains = TweenMax.to($("#mountains"),speed*2,{css:{left:-1600},repeatDelay:0,useFrames:false,repeat:-1,ease:Linear.easeNone});
var tweenBuildings = TweenMax.to($("#buildings"),speed,{css:{left:-1600},repeatDelay:0,useFrames:false,repeat:-1,ease:Linear.easeNone});

What these lines actually do is to declare the element that will be animated, declare the speed of the animation (speed*2 is slower than speed, because speed here declares delay), the css attribute that will be animated, here is the left position of the element, and finally that these animations will be replayed indefinitely by declaring repeat:-1.

You can download the files here: ParallaxJS

or

view an example of this technique in this little game: http://netgfx.com/trunk/birdbreak/

Enjoy!

facebooktwittergoogle_pluspinterestlinkedin
linkedin
Tagged , , , , , , . Bookmark the permalink.

3 Responses to Parallax effect with JQuery and TweenMax (greensock)

  1. Thanks a lot. GS kicks ass.

  2. One thing I noticed is that you import all of the GS libs. TweenMax contains all of them so you’ll be fine with just that one import. Great example and thanks again.

  3. Ashish Desai says:

    Great post! Did the job i was looking to do, thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>