Simple Parallax Scrolling

[timherbert 3 Likes (Newbie)]

So I found a tutorial here:

 

http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641

 

That makes parallax scrolling very simple and easy to understand. I want to take the javascript from the tutorial and apply GSAP. Not sure how to do that however..
The JavaScript from the tutorial. I'm sure it's easy but it would probably take me hours of playing with it where someone here has probably done it already or could do it in a minute or two. 

 

var $window = $(window); 

$('section[data-type=background]').each(function(){

  var $bgobj = $(this); // assigning the object

  $(window).scroll(function() {

  var yPos = -($window.scrollTop() / $bgobj.data('speed'));

  // Put together our final background position

  var coords = '50% '+ yPos + 'px';

  // Move the background

  $bgobj.css({ backgroundPosition: coords });

  });

});

 

[Michael71 59 Likes (Contributor)]

I have created two examples one for horizontal scrolling here: http://nightlycoding.com/index.php/2012/06/parallax-effect-with-jquery-and-tweenmax-greenshock/

 

and one for vertical scrolling (as the user scrolls the page) 

See the Pen vzIew by netgfx (@netgfx) on CodePen

 

I hope it helps

[Rodrigo 2,662 Likes (Superhero)]

Hi,

 

Also you can check this samples by Chrysto:

 

http://codepen.io/bassta/tag/parallax/

 

And this tutorial, is a bit old but can become useful in some way:

 

http://codeaway.info/parallax-and-scrolling-control-of-tweens-with-greensock-ap-js/

[timherbert 3 Likes (Newbie)]

Thanks for the help guys. I've actually seen different versions of these examples. Rodrigo I actually used yours for the first GSAP site I did. So thank you for the information and hard work you put in on this project, and Michael that horizontal tutorial got me thinking about an animation I can do for my current freelance project also so thank you. 
 

The bastaa tutorial's js scroll function is almost an exact copy of what I posted, as far as how it works, and I don't like the fixed heights for scrolling in the other tutorial as its unreliable for different height screens. Unless I missed something somewhere, as that is possible. But my site is still built on that premise http://timherbert.net so again thank you. 

I am probably going to try to figure this out in the am as its effecting one of the main animations on my main page and I want to be able to position it how I want not let how far the animation is from the top of the document dictate how it animates.  If I figure out something worthwhile I'll post it here.