Suggestions on how to achieve this effect

HI,

A client of mine has asked if I can create a site with a similar effect to this one: https://www.sageglass.com/en

Below the section that says “Look Again” there’re fullscreen images with text that scrolls up as the user scrolls the page and the images fade between each other while the text continues to scroll through.

I’ve searched a bit and found ScrollMagic which looks like it could be leveraged for this. Does anyone have any other suggestions that I might look into? The website will likely be created using Wordpress if that opens up any possibilities.

Thanks for any help!

Like, vanilla JS? :-) The basic functionality would actually only be a couple of images with fixed positions, which you fade in and out depending on the scroll position – here’s a pen:

Of course, a dedicated lib would give you way more options and all… if it’s worth it depends on how sophisticated the effect is going to be, I suppose.

Wow! That’s great. Obviously things aren’t always as complicated as I imagine them to be. I’ll peruse the code throughly and play around with it.

Thanks a lot!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.