parallax scrolling

[Louisa]

Hello!

 

The new release looks brilliant!!!!! So exciting!!!!

 

Little question...

Is parallax scrolling possible using GSAP? Absolutely love the effect but just can't manage to work out how to do it across all browsers!

 

Thanks!

Louisa

[Randall]

Yes! It's totally possible. In fact, with most jQuery parallax type plugins/fx you can merely substitute the jQuery animation calls with TweenLite/TweenMax calls and have better/smoother performance all the way around. The main thing to work out is the math of the layers from back to front and their max widths in relation to the left/right movement or parallax effect. In this example, it's simple hard-coded values, but can easily be made 'dynamic' with a little math work on the layers.

 

Here's my starter parallax JS Code that uses simple TweenLite calls.

parallax.zip

<!-- Assumes jQuery is loaded first! -->
<script type="text/javascript" src="js/jQuery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/greensock/easing/EasePack.js"></script>
<script type="text/javascript" src="js/greensock/plugins/CSSPlugin.js"></script>
<script type="text/javascript" src="js/greensock/TweenLite.js"></script>
<script type="text/javascript" >
function doParallax(){
var backLayer = document.getElementById('depthB');
var middleLayer = document.getElementById('depthM');
var frontLayer = document.getElementById('depthF');
$('#viewPort').mousemove(
	function(event){
		var bMouse = event.pageX / 7.7;
		TweenLite.to(backLayer, 1, { css:{left:'-' + bMouse + 'px'}, overwrite:true } );
		var mMouse = event.pageX / 2.5;
		TweenLite.to(middleLayer, 1, { css:{left:'-' + mMouse + 'px'}, overwrite:true } );
		var fMouse = event.pageX / 1.4;
		TweenLite.to(frontLayer, 1, { css:{left:'-' + fMouse + 'px'}, overwrite:true } );
	}
);
}
setTimeout('doParallax()', 2000);
</script>
<!-- sample html for above -->
<div id="viewPort" style="position:absolute; border-style:solid; border-color:#FF0000; border-width:thin; width:700px; height:170px; z-index:4; left:0px; top:15px;">View Port</div>
<div id="depthB" style="position:absolute; background-color:#666666; width:794px; height:200px; z-index:3; left:0px; top:0px; opacity:0.2;">Layer Back</div>
<div id="depthM" style="position:absolute; background-color:#888888; width:982px; height:150px; z-index:2; left: 0px; top: 50px; opacity:0.2;">Layer Middle</div>
<div id="depthF" style="position:absolute; background-color:#bbbbbb; width:1202px; height:100px; z-index:1; left: 0px; top: 100px; opacity:0.2;">Layer Front</div>

[Louisa]

Thanks Randall! Brilliant!!!! I spent quite a few very frustrating days trying to work out how to achieve a parallax scroll, so thank you so much for the above (and it's with Greensocks )!! Haven't tried it yet but it's on todays to do list!

Again 'brilliant!' and thanks!!!

[heyitsjayy]

The layer shape areas load fine with their opacity in both browsers, but they don't Tween to the layer based on mouse movement, in Chrome or Firefox. Was this coded to do so, or was it meant only as very basic starter code?

[Louisa]

I'm having a little trouble working out how to get it working!!! Do I change the 'css:{left :'-' ?

 

Thanks!!!

[Randall]

Pretty much just a base starter example of the concept behind the parallax. Sorry everyone, I didn't include all of the necessary imports [CSSPlugin.js was required too]. A new ZIP is attached below and the code updated in my earlier post. Just throw the Greensock files in the appropriate js/greensock/ folder and you should be good to go.

parallax.zip

[Louisa]

Thanks again Randall!!

 

Just got it working and it's brilliant!!

[Randall]

Great, I can now pull one of my feet out of the grave I was digging for myself!

[heyitsjayy]

Thanks for the updates, Randall!

 

I was wondering if someone might be able to take a look at my example site (http://www.elitemedia.us/parallax/parallax.html). I used the same exact .html file in the zip and included the proper greensock & jQuery files in the correct locations.

 

Everything looks right to me, however I'm still getting no cool parallax motion action. Please help a greensock JS brother out and take a look? I only want to be able to see this example in sweet scrolling motion!

[GreenSock]

Yikes - it looks like you're using Grant Skinner's TweenJS's CSSPlugin.js file instead of the GreenSock one. Doh! http://www.elitemedia.us/parallax/js/greensock/plugins/CSSPlugin.js (that ain't a GreenSock file).

 

Once you put the correct file in place, you should be good-to-go. And I'd recommend grabbing the latest version too (there have been a few minor updates since the initial beta launch).

 

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

[heyitsjayy]

haha, yikes indeed! Guess that's what happens when you try new things late at nights. You get your CSSPlugin.js files all mixed up! (had been using TweenJS's cssplugin previously)

 

Thanks for taking a look and finding the obvious fix. Works like a charm now! And thanks again Randall for the original code. Now, time for more experimentation!

[heyitsjayy]

And now... time for something slightly different. My cityscape modified parallax example using some of the base Greensock JS code that was provided earlier.

[Michael71]

I have wrote down a simple tutorial about how to create parallax effect with GSAP and JQuery.

 

You can view it here: http://nightlycoding.com/index.php/2012/06/parallax-effect-with-jquery-and-tweenmax-greenshock/

 

I hope it helps.