there is a special place in hell for pages like these that don't show examples
CSS-Native Parallax Effect
41–50 of 63 posts
Re: CSS-Native Parallax Effect
#42Earlier quoted context omitted.
tried 4 browsers, didn't work in any of them
FWIW it works on iPhone safari
But it jumps around and flickers pretty bad. Chrome’s own demos in the docs don’t work at all.
https://developer.chrome.com/docs/css-ui/scroll-driven-anima...
Edit: Their reference works and has some really nice demos. Must be an iframe problem. https://scroll-driven-animations.style/#demos
Re: CSS-Native Parallax Effect
#43Earlier quoted context omitted.
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?
Enabling (layout.css.scroll-driven-animations.enabled) and refreshing the codepen gives a "we crashed this to prevent a crash from an infinite loop" clicking to allow the infinite loops allowed me to see the animation.
Fedora 44 Kernel: x86_64 Linux 7.0.10-201.fc44.x86_64 Firefox 151.0.2
Re: CSS-Native Parallax Effect
#44A parallax effect has also long been possible with CSS 3D transforms. Here's a demo,[0][1] from the same person who made that CSS 3D FPS a while ago.[2]
[0]: https://www.keithclark.co.uk/articles/pure-css-parallax-webs...
[1]: blog: https://www.keithclark.co.uk/articles/pure-css-parallax-webs...
Re: CSS-Native Parallax Effect
#45How 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…
This method should still support GPU acceleration, as `transform` (or rotate/scale/etc.) is the only property being animated. The benefit of animation-timeline seems to be that it's much easier to set up than a CSS perspective context.
Re: CSS-Native Parallax Effect
#46I was expecting a demo on the linked page itself.
Interesting to let Codex or Claude Code do it :)
Re: CSS-Native Parallax Effect
#47Using css perspective for parallax has been around for years and is much simpler code.
Re: CSS-Native Parallax Effect
#48I get motion sickness from this specific effect. Especially on high refresh rate screens.
Re: CSS-Native Parallax Effect
#49You 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)
oh that's cool!
Can only see it on chrome though =/. I switched to Safari as the lesser of two data-harvesting evils. Or rather, with an iPhone I've already chosen my overlord. I also switched to Kagi. Trying to deGoogle myself.
Re: CSS-Native Parallax Effect
#50That sounds interesting but it would be a whole lot more interesting if the page was itself an example of said effect!
I've put together an example here but it doesn't seem to work in Firefox 151.0.2 (64-bit): https://favs.eu.org/parallax/
Edit: if the body has class="no-sda", it uses a js fallback.