Right now I’m looking to figure out how to create an effect akin to how MONO achieves theirs on the homepage of their site.
I have been attempting to replicate this with tweaking z-index values and position states for different elements, but haven’t had any luck yet. I’ve figured this would need some assistance from custom code, but that’s far from my level of expertise with web design.
Thanks for any help y’all have on this!
so because the videos aren’t fixed, just use background videos for the sections then set the sections to position relative and set the titles to position absolute with overflow none. This should make them stay within the section in place but hide when leaving the section. That should do it.
I guess I’m just not figuring out how to achieve it, here’s the preview link in case you can see what i’m doing wrong, I’m thinking I may be snowblind to it at this point lol. I’ve seen a post somewhere that @vincent detailed some sort of masking effect, but I’m not sure quite how to implement custom code in Webflow just yet…
No you’re not. you’re trying to achieve the texts at the same position but being masked by the overflow of their sections? That’s not easy. Especially, you’ve tried with position:fixed and then you’re losing any ability to mask them, and the z-index are no help? That’s normal. Fixed position makes an element go out of the html flow of elements so they don’t respect the rules you’d like them to.
inspect the code of your Mono example, find the container of the titles and you’ll see they use the CSS CLIP property. like this:
clip: rect(0,auto,auto,0);
Read about CSS Clip and try to figure out if ou can use it on your own. Sorry, I’m on the go and can’t really provide mor help than this at the moment. Please report tomorrow?
Alright, so… I think I figured it out all well. Here’s the LINK to what I’ve put together.
I woke up this morning with the idea of layering div’s on top of each other, paired with the ability to keep the background image of a div as “fixed” or not.
What I did was use absolute positioning to layer two div blocks in a section, setting the background of one div to an SVG of the text I wanted, and the other div filled with content, in the link above I just used GIFs. I set the div with the SVG text bg to fixed and z-index 2, the GIF div to not fixed and z-index 1, and the effect (as far as I can tell) comes out as I’d planned! I haven’t tested yet on other browsers besides Chrome yet but I think I may be on the right track…