Jump to content
Search Community

Simple Parallax Scrolling

timherbert test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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 });
  });
});
 
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.
×
×
  • Create New...