Zoom through logo to content behind upon scroll
I have a logo with an O in it, and I want it such that , when the user scrolls it increases in size and eventually goes through the O in the logo and shows the "next slide" or the content that would be otherwise below it.
Do I need something like three.js for this?
16 Replies
so basically, I want it to zoom through this
also how do I achieve this two-tone effect I have going on, I've made this in photoshop , but how do I make anything below that pinkish color curve a different color
the two tone effect you can do by laying 2 layers on top of eachoter with the same text, and a mask on the top layer. something like this
https://codepen.io/MarkBoots/pen/oNMVoMj?editors=1111
I did it with text, but it could be images as well
sounds like something Scroll-Linked Animations and
scroll-timeline'
could do, but it's still early and only experimental.
Maybe use them as a progressive enhancement and eventually all visitors will see this. It's nothing I would spend too much time on or throw tons of JS at your visitors to get it done. It's just eye candy after all w/o any special purpose.
https://caniuse.com/css-scroll-timeline
You may link an IntersectionObserver and the offset values for the sections that scroll out of the viewport to some CSS properties that scale the logo and mask. Many masks.
I can't even think of how to setup the document and (repetitive) element structure for the O-zoom, to show the next layer where another instance of the logo is visible and repeat from there...
Also sounds like an accessibility nightmare to come true 🙂I ditched the zoom idea after thinking about it for a while , and I did something else instead ( ill post a demo of that soon )
but I wanted to know how exactly to achieve this, when the layer below is moving, also I want that pink area to be like a proper circle or something else like an svg, how would I do this then?
do I just replace the mask image with a svg in that case?
would that work?
yes, now i use mask image with a gradient, but you can use an svg for that
also what if I just have one element and I just a ::before or ::after
will they share the animations?
you could do it with pseudo elements instead of the 2 divs yes
dont mind the sloppy code, but this would apply to the top element, would the pseudo element follow suit?
or will I need to the same code for that too?
( this is in react / nextjs )
the
logo
variable is a useRef hook instanceis the data-motion for a library, or do you use it in css yourself? it all depends how it is being used. Can not tell without actual running code.
If you need help with that, I would ask for a simple demo in a codepen
I use it in css myself
its not a library
its just a custom tag, which is attached to this
GitHub
GitHub - itshenryx/inoc-web: Web app for inoc/innoCare, built with ...
Web app for inoc/innoCare, built with React,Next and goLang. - GitHub - itshenryx/inoc-web: Web app for inoc/innoCare, built with React,Next and goLang.
oh, okay yea i think pseudo will follow. its only opacity and transform, pseudo's are attached to the main element
oh alright , ill try it out and let you know then, thanks ❤️
@markboots.
how do I use a ::before or ::after without changing the content