I’m trying to accomplish an effect where the text is changed on scroll over. To better explain, see GIF below taken from WIX website. I know how to do it with background images (set section background image to “cover”) but how to accomplish this effect with only TEXT?
So, instead of that background changing, it will, on scroll, change one text to the other.
Thanks for any thought of help (even if it did not even reach the reply button!
(GIF set to repeat 3 times)
Hey @UpperCity
Could you clarify for me if what you trying to do is
Something like this:
http://text-changed-on-scroll.webflow.io/
Or like this:
http://text-changed-on-scroll.webflow.io/covering-the-text
Or another thing completely different.
Gilson! First: Beautiful this sure is, so quick is the reply with clear examples.
Now on to the dilemma! Your examples are very close indeed, but I want the effect to be instantly when the container gets over the text.
I attach a picture and hope it serves enough as an example. Else I will create the effect with some PS animation.
Hey @UpperCity
Check the live example:
http://text-changed-on-scroll.webflow.io/mask
I made the example you needed on the check the page Mask:
https://preview.webflow.com/preview/text-changed-on-scroll?utm_source=text-changed-on-scroll&preview=9b436cfd86033289c33da42063e552fb
I left the other examples there aswell, so you can reverse engineer all of them.
That is neat! But I’m going to be a hassle here. The page will mainly be for reading. And text that moves gets tough to read, if more than a few headers.
If made by triggers, I suppose there will always be a delay (even when set to 0).
But maybe it is possible to combine what you have done with sticky. I’ll give it a shot.
Alright, this is way above my skill level. I only entangle myself in confusions.
I’ll have to come back to this later.
If you figure out a way to solve it before I do, you have my love.
I can work with you with contract, send me a private message if you want it.
