[Create pinned parallax with fading background images]

Hi @akapowl

 

Thank you for such a detailed response. I took a quick look and that looks pretty close to what I'd like to achieve. 

This will help me get to where I want for sure and I appreciate your write up. Hopefully someone else will come across your pen and find it useful as well.

 

I recommend checking out Tailwind. I just started to learn it myself recently and it's really easy to use and does a lot of great things.

 

Happy new year to you as well.

 

Kindly-

Josh

[Create pinned parallax with fading background images]

Hi Zach, thanks for the response!

 

You don't see a large paragraph above the Codepen explaining what I am attempting to achieve?
There's a New York Times post I included as well that demonstrates a similar example.

 

If you can't see my paragraph text then something must be wrong with the post?

 

 

[Create pinned parallax with fading background images]

First of all, hello and thanks for such an awesome tool and community of folks engaged it in!

I have just recently discovered GreenSock and hope to use it to create a similar effect like used here:

https://www.nytimes.com/newsgraphics/2013/10/27/south-china-sea/index.html

 

The only major difference is that I will only need to do this for one section of a website.

 

The idea is that when a user scrolls down to a specific section, the section will be pinned and the parallax effect will take place.

Within the parallax itself, there will be 4 or 5 sections that come into view as the user continues to scroll each part of the parallax will have

a background images that fades from one to the other -- like the example I pasted above.

 

I've managed to get GreenSock with ScrollTrigger and Tailwind2 setup as a Codepen. 

I am not a javascript expert at all. I found a similar Codepen and started there and now I am here, haha.

 

Like in the NYT link, I'd love to get the section to pause in the middle of the page while the parallax happens but would rather have the parallax disappear inside the image area vs. fading out when outside of it.

 

I've looked and looked for other similar examples but can't locate anything. If anyone has anything similar I could work from that would be great!

 

See the Pen YzGexex by josh-white-the-selector (@josh-white-the-selector) on CodePen