Combining users' scroll + animation css3/Javascript

Question

First post on SO so far :)

I'm creating a parallax website combining css3 + javascript.

I followed this tutorial and I have to say that it gave me quite a grasp on the subject.

I was just wondering 2 things:

1. How do I translate the movement on the X axis?
2. Most Important: How can i combine users' scrolling with animations?

I've seen there is plenty of plugins out there, but I'd rather develop a solution myself without getting the code too heavy and complicated. Could you point me out some good resource, which will enlighten me on this technique?

Thank you guys!

EDITED on 17/09/12 at 14.14 (+1 GTM TIME) In case someone would be interested, that should be the idea-code by which we would do the trick:

$(document).ready(function() { $('section[data-type="example"]').scroll(function() {

// If the user scroll as much as we need, in this instance 750px
if (scrollTop() > '750px') {
  // switch its class from ".animation" to ".animated" 
  $(".animation").toggleClass("animated"); 
}

}); });

CSS Classes would be: .animation { width: 300px; height: 300px: -webkit-transition: width 2s ease, height 2s ease; -moz-transition: width 2s ease, height 2s ease; -o-transition: width 2s ease, height 2s ease; -ms-transition: width 2s ease, height 2s ease; transition: width 2s ease, height 2s ease; }

.animated { width: 400px; height: 400px; }

As we see, in ".animation" we would find the initial size and the animation, and in ".animated" we're going to print what we want to achieve.

This has been created thanks to the hints provided by @jfriend00. Unfortunately I havn't had the possibility to try it yet, so feel free to improve it. I wrote it here because it seems like someone is interested to this topic, and previously I posted it in a comment making it unreadable :)

Also, Jfriend00 told that .scrollTop() is a JQuery Method, not a plain function. How do you think it could be improved using plain JS?

Thanks in advance and sorry for my grammar error and for the noobness; I'm not English Native and I'm quite new with programming :)

Answer 1

From your comment:

Let's say that for example, I want to combine the users' scroll to a transitional effect. So i.e. once the user has scrolled 750px, I want an object to appear with a fade transition. How do I link the scrolling factor with the animation?

This is one way to approach that specific example:

1. You would register an event listener for the scroll event.
2. In the scroll event handler, you would examine the current scroll position and decide if you wanted to take action (e.g. scrollTop is more than 750px).
3. The easiest way to trigger a CSS3 animation is to add a class name to your object. If the object has CSS assigned to it for that new class and the object is configured for CSS transitions on any of the properties that are changed by adding the class name to the object, then a CSS3 animation will start when the class is added.