Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Louisa

parallax scrolling

Recommended Posts

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

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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 :-P )!! Haven't tried it yet but it's on todays to do list!

Again 'brilliant!' and thanks!!! :-P

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

 

Thanks!!!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Thanks again Randall!! :-P

 

Just got it working and it's brilliant!!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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/

  • Like 1
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...
  • 4 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×