CSS-Native Parallax Effect
dan-webnotes.com
CSS-Native Parallax Effect
1–10 of 63 posts
Re: CSS-Native Parallax Effect
#2That sounds interesting but it would be a whole lot more interesting if the page was itself an example of said effect!
Re: CSS-Native Parallax Effect
#3Re: CSS-Native Parallax Effect
#4A demo https://codepen.io/editor/phelm/pen/019e87f5-dfec-7372-9849-...
There's me scrolling up and down and thinking "hey, it's not working!" But it's behind a flag on Firefox: https://caniuse.com/?search=view-timeline-name
Re: CSS-Native Parallax Effect
#5How does this compare to the classic css-native parallax effect? Before the scroll timeline APIs you'd use the "perspective" css property to create a container where the z plane is n pixels away from the screen, and then position each layer within it at a different z distance using transform: translateZ
That method is GPU accelerated too, so it is performant compared to some js solutions, and has worked well in every browser for around a decade
I like the idea of the scroll-timeline though, just keen to understand what the advantage is for this
Re: CSS-Native Parallax Effect
#6A demo https://codepen.io/editor/phelm/pen/019e87f5-dfec-7372-9849-...
There's me scrolling up and down and thinking "hey, it's not working!" But it's behind a flag on Firefox: https://caniuse.com/?search=view-timeline-name
Noticed the same thing. In Mac Safari it works without setting any flags.
Re: CSS-Native Parallax Effect
#7A demo https://codepen.io/editor/phelm/pen/019e87f5-dfec-7372-9849-...
What an age where we need a pile of javascript as well as a bot check to demo a simple CSS trick.
Re: CSS-Native Parallax Effect
#8How does this compare to the classic css-native parallax effect? Before the scroll timeline APIs you'd use the "perspective" css property to create a container where the z plane is n pixels away from the screen, and then position each layer within it at a different z distance using transform: translateZ That method is GPU accelerated too, so it is performant compared to some js solutions, and has worked well in every…
I was wondering the same thing. That translateZ is a bit fiddly to get right, so I could believe this is a bit easier to use, maybe? And presumably this could be used for other properties besides position, like colors, opacity or blurs.
Re: CSS-Native Parallax Effect
#9A demo https://codepen.io/editor/phelm/pen/019e87f5-dfec-7372-9849-...
There's me scrolling up and down and thinking "hey, it's not working!" But it's behind a flag on Firefox: https://caniuse.com/?search=view-timeline-name
It's been behind a flag for ages. Maybe because of performance issues?
Re: CSS-Native Parallax Effect
#10You can make some really cool stuff with css scroll animations. I used SVG paths with a scroll animated dash offset to draw an image while scrolling. Zero javascript, it feels so smooth. https://thomaswelter.nl (the background)