Streaming live at 10am (PST)

Static scroll + Transparency on scroll


#1

I am trying to get the effect I see on the hero image of https://molekule.com/

Keep the page static as we scroll down and reduce transparency as we scroll. Has anyone tried to do this. How can we achieve this.


#2

Nice effect.

Fixed than relative:

(Change CSS dynamically on Scroll) in this case the section style from position: fixed; to relative in pointX - is only by custom code (See this wishlist idea)

Basic Example of the concept her.

Opacity trick

The Opacity trick - two images one on each other - (How? with position: absolute; you break the normal flow)

When you scroll the opacity change and you get cool effect:
before
after
With this library:

But maybe you could achieve this by webflow interactions (I never try to create this effect on webflow- see this forum Q)

Anyway - this is more freelancer job - no way to solve this by forum answer (To solve this you should look at the code and try to reproduce idea).

I hope you find a solution :slight_smile:


#3

This topic was automatically closed after 60 days. New replies are no longer allowed.