Parallax on scroll

[joej 0 Likes (Newbie)]

Can someone please tell me how this site accomplished this type of parallax effect? Seems so easy but I find zero tutorials on it. It's a mystery! 

 

https://art4globalgoals.com/en/exhibition

See the Pen by en (@en) on CodePen

[Shaun Gorneau 2,037 Likes (Superhero)]

Hi @joej and welcome to GSAP!!

 

I'm not sure specifically which aspect of the scroll/parallax you're looking for ... but if it's the ability to navigate to sections on scroll (with parallax as an characteristic of the transition), here is a post where I helped someone with that just a few weeks ago.

 

 

And here is the CodePen specifically.

 

See the Pen qYEKLy by sgorneau (@sgorneau) on CodePen

 

 

Hope this helps! And happy tweening!

 

[Sahil 2,655 Likes (Superhero)]

I assume you are referring to parallax scrolling on this page https://art4globalgoals.com/en/project

 

Take a look at couple of demos in following threads,

 

 

Also take a look at following article that discusses how different scrolling methods affect performance,

 

https://blogs.windows.com/msedgedev/2017/03/08/scrolling-on-the-web/#lvzozB8m1fZOWgTt.97

[joej 0 Likes (Newbie)]

Thanks, Sahil!

Some of this is close to what I need. Just can't figure out how to give each element different z depths. Or maybe they are setting different speed for each element to give an appearance of depth? 

[Sahil 2,655 Likes (Superhero)]

Ya they have different speed so it creates illusion of depth. Please go through the threads we mentioned, you would be able to modify them to achieve same effect.

[joej 0 Likes (Newbie)]

I don't see anything about setting different speeds on the threads. I see this effect all the time but no one can explain it. 

[Shaun Gorneau 2,037 Likes (Superhero)]

Hi @joej, "speed" is just distance/time ... so that, in its most basic sense, is two properties of a tween on an object and can be represented by something like

 

obj = '#someObject';
time = 1;
distance = {x: 500};

TweenMax.to( obj, time, distance );

 

See the Pen KepvRV by sgorneau (@sgorneau) on CodePen

 

 

Another aspect of z-depth is scale. Things close are larger and move faster, things farther away are smaller and move slower.

 

Hope this helps!

 

 

Here is a thread where I helped somebody understand that a while back.

 

 

The specific pen: 

See the Pen YaJzZp by sgorneau (@sgorneau) on CodePen

 

[joej 0 Likes (Newbie)]

Still not what I'm looking for. Seems like everyone is doing it but no one knows how. It's a mystery! 

[Shaun Gorneau 2,037 Likes (Superhero)]

11 minutes ago, joej said:

Still not what I'm looking for. Seems like everyone is doing it but no one knows how. It's a mystery! 

 

Well, one thing is for sure, parallax and scroll events are no mystery!  But, I am unsure of what you are looking for. The example you provided shows many things going on ... but 2 things at its core

 

1. Scroll event triggering page navigation (albeit clunky arrow controls offer more reliability)
2. Parallax (to some extent ... more-so fixed positioning on elements than anything else) as an effect on some transitions

There are other cool things happening ... but what is it specifically your asking about?