Scroll text over blured background (aka: medium style)

Hey guys, there is an old effect in medium that I’m trying to replicate. So far I
succeeded with the bulered background but I’m not able to keep the text flowing over it.
This is a medium article with that effect: Why Chess Will Destroy Your Mind. That’s how it looked back in 1859… | by Clive Thompson | The Message | Medium

Thanks in advance for any light on this.
Cheers guys :slight_smile:

Here is my public share link: https://preview.webflow.com/preview/ituness-top-notch-project?preview=1917344c74c348985925084fa0ac0f04

https://webflow.com/design/ituness-top-notch-project

Here is a partial fix of the blur background. Problem is it is working on a scroll trigger which is effected by a scroll position in the overall site. If you do not need the transition but merely want it to be a blur I have shown how to do that

Let me know if you need any further help.

Here is the share site to my sandbox
https://preview.webflow.com/preview/truereflectionmedia-sandbox?preview=220e9c00ea9b62c3fe967cedf843ee11

and here is a video
https://screencast-o-matic.com/watch/cbQXeNIlY0

Woa Jeremy! I’m impressed with your kindness and dedication to this. Thank you very much for taking the time to take a look and share that video.

It’s an interesting approach. I believe that what we have to achieve its:
1: scroll and when we have the image at 100vh then
2: get a blur version of it and
3: the text would overlay over it. Finally
4: the rest of the site keeps flowing.

The thing is that the overflow scroll triggers not at 100vh and depends of where the cursor is killing the overall desired effect:

It’s a tricky orchestra.

Yeah it is not a perfect solution. Sounds like in interaction 2.0 they might be tying more CSS effects to the interactions. So it is not just opacity or movement based interactions. BUt on scroll image blur ect. I guess we will wait to see. I went to see what they do on the medium site. I’m not sure what the interaction actually is. But They don’t use a blur. They transition between two images on the scroll. One is clear the other is a prebuilt dark and blurred image. So it is two images. The timing of the transition is what gives it the effect.
image

might be something to play with. And forget the blur CSS altogether

Yeah, maybe we don’t have the tools yet.
I have found this though: Interactions like Apple High Sierra Page and the overlay text works but there is not a previous section so the scroll just works (since its the first div you have.)

The other high sierra page was done with two images as well. Not using the CSS blur. Because it is easier to swap out images.

Lets forget the blur effect. How can we overlay the text over the image only when it reached 100vh? that’s what we are not figuring it out.

It actually is doing that. The problem is the double scroll. As soon as you enter that area with the mouse when it becomes visible it will start to scroll. As you say it works fine at the top but it’s actually not helpful in the middle of the page. If you want to test use the outer edge to scroll it will scroll 100VH and then you can scroll the inside but I think medium has a lot more js working on that section. Double scroll is something I try to avoid. It is really frustrating for users especially on mobile. Maybe just a move interaction at a really slow pace to give more of the scroll feel. Without some sort of js working it. I don’t think you will be able to get it with Webflow scroll interaction.

Jeremy

I believe we have to go the custom code route. Will dive into that. Thanks Jeremy.

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