Moving Image Effect – The one page trend

[DeeM]

Well how does call the “new” Trend of moving image effect (the one that the images scrolling but the content is sticked).

[Atelierbram]

Parallax scrolling

[DeeM]

Its not exactly what i am searching , i scrolling image block not the bg.

[__]

Can you show us an example of what you are talking about?

[DeeM]

http://www.google.com/nexus/5/
the second image block.

[__]

the second image block.

This?

That’s parallax scrolling.

[DeeM]

Ohh okay ty!

[nixnerd]

@DeeM, I’m very, very familiar with that effect and have used it a ton. It’s the same effect you’ll see here (not one of my sites):

MFG Labs

Now, the term parallax simply means that there is a depth of field and various items are moving and different speeds (from the perception of the viewer, the way they do in real life) to give the page dimension. See here:

The effect in question is technically parallax because the background image is moving at a slightly slower speed than the rest of the body. If you use a parallax-specific jQuery plugin like Scroll Magic, you’re likely to run into some problems and bugs… just like I did.

The only way to accomplish this with those plugins is to essentially “push” the background image down very slowly as you scroll… because it needs to be slower than the default speed of everything else. I suppose you could speed everything else up but that’s:

A. Way over-thinking the problem.
B. Probably not a good practice.

So, in trying to “push” the background image down really slowly, you’ll run into some problems. First of all, you have to set a scroll duration, which is problematic because you don’t know how big the user’s screen is. Obviously you can query this sort of thing and feed it in dynamically. But, there’s a performance hit associated with that. Also, if the user scrolls up really fast by hitting say the ‘home’ button on your nav OR the ‘home’ key on their keyboard, it takes a minute for Scroll Magic to realize the animation has reversed… so there will be no background image for about 1 second.

THIS IS THE ABSOLUTE BEST TUTORIAL I’VE EVER FOUND FOR THIS:

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

This is exactly what you want. It’s all based on setting a data-type and a data speed. It is in my mind, the most elegant solution for this. KISS!

By the way, it might have sounded like I don’t love Scroll Magic. That’s definitely not the case… because I do. It’s just not the best tool for this particular job.

[nixnerd]

A few more things…

Scroll Magic is capable of much more than parallax effects for future reference. You can literally tie anything to scroll position. Color, zoom, z-index, opacity… anything. So, keep that in mind for future reference. Plus, it’s powered by GSAP… which is fast as hell.

Also, the ONLY issue you’ll run into with the tut I sent you is… if you want to house the effect in a container that’s not at the very top, or you want to use multiple containers that trigger at different points, you’ll have to use something like Waypoints.

That’s it. Have fun!

[Author]

Posts