8 ms·

CSS-Native Parallax Effect

146 points by dandep 4mo ago

deleted 4mo ago
[deleted]
baliex 4mo ago
That sounds interesting but it would be a whole lot more interesting if the page was itself an example of said effect!
- dsmurrell 4mo ago
  I was also looking for examples.
- yashD18 4mo ago
  i was waiting for the effect to show up
- jonahx 4mo ago
  Or even linked to one!
- sourcecodeplz 4mo ago
  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/ https://favs.eu.org/parallax/ Edit: if the body has class="no-sda", it uses a js fallback.
  - yieldcrv 4mo ago
    its beautiful! where can I track the compatibility? and how do I know if I'm hitting the fallback?
    - sourcecodeplz 4mo ago
      updated it with info on what you're using and current baselines comp (Chrome/Edge 115+, Safari 26+, and Firefox behind a flag).
  - jonahx 4mo ago
    This doesn't do anything, just scrolls like a normal page. Mac on latest chrome.
    - danyim 4mo ago
      Same observation here, but Chrome on iOS
    - addandsubtract 4mo ago
      Seems fixed now. Works in both Firefox and Chromium on macOS for me.
      - jonahx 4mo ago
        Working now.
        marginalia_nu 4mo ago
        Not for me.
  - triplelasagna 4mo ago
    I really like the fact that your "recipe" already includes support for prefers-reduced-motion. Parallax can really trigger motion sensitivity issues up to vomiting or several days of bed rest with severe migraine. You did leave that part out of your recipe though. Would you mind adding it there, so that people who copy paste are more inclined to actually keep/use that part as well?
    - sourcecodeplz 4mo ago
      nice catch! added it
phelm 4mo ago
A demo https://codepen.io/editor/phelm/pen/019e87f5-dfec-7372-9849-be4d0d8586f0 https://codepen.io/editor/phelm/pen/019e87f5-dfec-7372-9849-...
- frereubu 4mo ago
  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 https://caniuse.com/?search=view-timeline-name
  - anssip 4mo ago
    Noticed the same thing. In Mac Safari it works without setting any flags.
  - werdnapk 4mo ago
    It's been behind a flag for ages. Maybe because of performance issues?
    - goodmythical 4mo ago
      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
  - WithinReason 4mo ago
    tried 4 browsers, didn't work in any of them
    - alpinisme 4mo ago
      FWIW it works on iPhone safari
      - 4mo ago
mpeg 4mo ago
How 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
- iainmerrick 4mo ago
  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.
- som 4mo ago
  No doubt quite a few folk with the same question. Keen to understand performance tradeoffs. Obvious comparison note would be that the "new" method currently enjoys somewhat limited browser support (no Firefox without a flag, and only since Safari 26)
- dandep 4mo ago
  OP here, thanks for asking. While the `perspective` technique works too, it has the downside of needing a careful combination of scroller elements and properties. This approach adds a single class to the image container and that's it. Plus you can control many aspects of the animation such as entry/exit ranges, and make it control other properties like opacity or color, for example. I know browser support is still lacking, but it will get there eventually. I'm not using this in production code yet, but I think it's useful to experiment with these new CSS APIs.
- semolino 4mo ago
  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.
thomasikzelf 4mo ago
You 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 https://thomaswelter.nl (the background)
- rsyring 4mo ago
  Android Firefox: there is no background image.
  - thomasikzelf 4mo ago
    firefox android does not support CSS animation-timeline, and firefox desktop needs layout.css.scroll-driven-animations.enabled. This probably should not be used for any critical features.
- apsurd 4mo ago
  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.
rohitsriram 4mo ago
Love the one-variable design where scale and translate stay in sync automatically, just wish Firefox would get off the flag already.
- dandep 4mo ago
  Thanks!
duskdozer 4mo ago
In a world where it's increasingly overlooked, I'm glad the author mentions disabling it respecting user settings. I do think it should be reversed and only enabled with the `@media (prefers-reduced-motion: no-preference)`, but that is the opinion of someone who gets negative value from animations and is bemused by how much dev and compute time is spent on them.
sillyboi 4mo ago
It would be awesome to put an interactive example right in the article.
xuzhenpeng 4mo ago
[flagged]
i_am_a_peasant 4mo ago
Idk about anyone here but I find the effect disorienting.
- amon_spek 4mo ago
  Yes. I'm a little more sensitive than average, but not enough to turn off animations, and this is uncomfortable.
- davidguda 4mo ago
  Slightly disorienting but mostly just gimmicky. Luckily the "scroll down and more stuff than just scroll i going on" trend has mostly faded.
mrcsmcln 4mo ago
I played around with this API some time ago. It’s simple and high-performance, but one feature I wish existed is damping. Scroll-driven animations are tied directly to the scroll timeline, so there’s no concept of the parallax object “catching up” to the scroll progress over, say, one second. From what I remember, `animation-timing-function` feels weird when you scroll, so it’s not the right solution. GSAP offers this, but it’s JS-only.
albert_e 4mo ago
could this be combined with a sprite like image that shows a slightly different angle of the image with each step
Theodores 4mo ago
Great. I tried the Google examples a while ago and got nowhere with it, time for another go, within the netherworld of SVG, to map to several different layers.
swordlucky666 4mo ago
[flagged]
Semaphor 4mo ago
This [0] seems to be the main meta bug, with [1] being for CSS and [2] for JS, for FF to ship it without the flag. There seems to be slow work towards it, kinda funny that FF was the first browser to have it (flag-gated, according to CIU) and now is the only one without it in stable ;) [0]: https://bugzilla.mozilla.org/show_bug.cgi?id=1676779 https://bugzilla.mozilla.org/show_bug.cgi?id=1676779 [1]: https://bugzilla.mozilla.org/show_bug.cgi?id=1676780 https://bugzilla.mozilla.org/show_bug.cgi?id=1676780 [2]: https://bugzilla.mozilla.org/show_bug.cgi?id=1676781 https://bugzilla.mozilla.org/show_bug.cgi?id=1676781
tantalor 4mo ago
Hey, where's the demo?
thecaio 4mo ago
there is a special place in hell for pages like these that don't show examples
sheept 4mo ago
A 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-websites/demo3-webkit-overflow-fix/ https://www.keithclark.co.uk/articles/pure-css-parallax-webs... [1]: blog: https://www.keithclark.co.uk/articles/pure-css-parallax-websites/ https://www.keithclark.co.uk/articles/pure-css-parallax-webs... [2]: https://www.keithclark.co.uk/labs/css-fps/ https://www.keithclark.co.uk/labs/css-fps/
Onplana 4mo ago
I was expecting a demo on the linked page itself. Interesting to let Codex or Claude Code do it :)
geuis 4mo ago
Using css perspective for parallax has been around for years and is much simpler code.
hit8run 4mo ago
I get motion sickness from this specific effect. Especially on high refresh rate screens.

146 points by dandep 4mo ago

deleted 4mo ago

[deleted]

baliex 4mo ago

That sounds interesting but it would be a whole lot more interesting if the page was itself an example of said effect!

dsmurrell 4mo ago
I was also looking for examples.
yashD18 4mo ago
i was waiting for the effect to show up
jonahx 4mo ago
Or even linked to one!
sourcecodeplz 4mo ago
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/ https://favs.eu.org/parallax/ Edit: if the body has class="no-sda", it uses a js fallback.
- yieldcrv 4mo ago
  its beautiful! where can I track the compatibility? and how do I know if I'm hitting the fallback?
  - sourcecodeplz 4mo ago
    updated it with info on what you're using and current baselines comp (Chrome/Edge 115+, Safari 26+, and Firefox behind a flag).
- jonahx 4mo ago
  This doesn't do anything, just scrolls like a normal page. Mac on latest chrome.
  - danyim 4mo ago
    Same observation here, but Chrome on iOS
  - addandsubtract 4mo ago
    Seems fixed now. Works in both Firefox and Chromium on macOS for me.
    - jonahx 4mo ago
      Working now.
      - marginalia_nu 4mo ago
        Not for me.
- triplelasagna 4mo ago
  I really like the fact that your "recipe" already includes support for prefers-reduced-motion. Parallax can really trigger motion sensitivity issues up to vomiting or several days of bed rest with severe migraine. You did leave that part out of your recipe though. Would you mind adding it there, so that people who copy paste are more inclined to actually keep/use that part as well?
  - sourcecodeplz 4mo ago
    nice catch! added it

phelm 4mo ago

A demo https://codepen.io/editor/phelm/pen/019e87f5-dfec-7372-9849-be4d0d8586f0 https://codepen.io/editor/phelm/pen/019e87f5-dfec-7372-9849-...

frereubu 4mo ago
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 https://caniuse.com/?search=view-timeline-name
- anssip 4mo ago
  Noticed the same thing. In Mac Safari it works without setting any flags.
- werdnapk 4mo ago
  It's been behind a flag for ages. Maybe because of performance issues?
  - goodmythical 4mo ago
    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
- WithinReason 4mo ago
  tried 4 browsers, didn't work in any of them
  - alpinisme 4mo ago
    FWIW it works on iPhone safari
    - 4mo ago

mpeg 4mo ago

How 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

iainmerrick 4mo ago
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.
som 4mo ago
No doubt quite a few folk with the same question. Keen to understand performance tradeoffs. Obvious comparison note would be that the "new" method currently enjoys somewhat limited browser support (no Firefox without a flag, and only since Safari 26)
dandep 4mo ago
OP here, thanks for asking. While the `perspective` technique works too, it has the downside of needing a careful combination of scroller elements and properties. This approach adds a single class to the image container and that's it. Plus you can control many aspects of the animation such as entry/exit ranges, and make it control other properties like opacity or color, for example. I know browser support is still lacking, but it will get there eventually. I'm not using this in production code yet, but I think it's useful to experiment with these new CSS APIs.
semolino 4mo ago
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.

thomasikzelf 4mo ago

You 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 https://thomaswelter.nl (the background)

rsyring 4mo ago
Android Firefox: there is no background image.
- thomasikzelf 4mo ago
  firefox android does not support CSS animation-timeline, and firefox desktop needs layout.css.scroll-driven-animations.enabled. This probably should not be used for any critical features.
apsurd 4mo ago
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.

rohitsriram 4mo ago

Love the one-variable design where scale and translate stay in sync automatically, just wish Firefox would get off the flag already.

dandep 4mo ago
Thanks!

duskdozer 4mo ago

In a world where it's increasingly overlooked, I'm glad the author mentions disabling it respecting user settings. I do think it should be reversed and only enabled with the `@media (prefers-reduced-motion: no-preference)`, but that is the opinion of someone who gets negative value from animations and is bemused by how much dev and compute time is spent on them.

sillyboi 4mo ago

It would be awesome to put an interactive example right in the article.

xuzhenpeng 4mo ago

[flagged]

i_am_a_peasant 4mo ago

Idk about anyone here but I find the effect disorienting.

amon_spek 4mo ago
Yes. I'm a little more sensitive than average, but not enough to turn off animations, and this is uncomfortable.
davidguda 4mo ago
Slightly disorienting but mostly just gimmicky. Luckily the "scroll down and more stuff than just scroll i going on" trend has mostly faded.

mrcsmcln 4mo ago

I played around with this API some time ago. It’s simple and high-performance, but one feature I wish existed is damping. Scroll-driven animations are tied directly to the scroll timeline, so there’s no concept of the parallax object “catching up” to the scroll progress over, say, one second. From what I remember, `animation-timing-function` feels weird when you scroll, so it’s not the right solution. GSAP offers this, but it’s JS-only.

albert_e 4mo ago

could this be combined with a sprite like image that shows a slightly different angle of the image with each step

Theodores 4mo ago

Great. I tried the Google examples a while ago and got nowhere with it, time for another go, within the netherworld of SVG, to map to several different layers.

swordlucky666 4mo ago

[flagged]

Semaphor 4mo ago

This [0] seems to be the main meta bug, with [1] being for CSS and [2] for JS, for FF to ship it without the flag. There seems to be slow work towards it, kinda funny that FF was the first browser to have it (flag-gated, according to CIU) and now is the only one without it in stable ;) [0]: https://bugzilla.mozilla.org/show_bug.cgi?id=1676779 https://bugzilla.mozilla.org/show_bug.cgi?id=1676779 [1]: https://bugzilla.mozilla.org/show_bug.cgi?id=1676780 https://bugzilla.mozilla.org/show_bug.cgi?id=1676780 [2]: https://bugzilla.mozilla.org/show_bug.cgi?id=1676781 https://bugzilla.mozilla.org/show_bug.cgi?id=1676781

tantalor 4mo ago

Hey, where's the demo?

thecaio 4mo ago

there is a special place in hell for pages like these that don't show examples

sheept 4mo ago

A 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-websites/demo3-webkit-overflow-fix/ https://www.keithclark.co.uk/articles/pure-css-parallax-webs... [1]: blog: https://www.keithclark.co.uk/articles/pure-css-parallax-websites/ https://www.keithclark.co.uk/articles/pure-css-parallax-webs... [2]: https://www.keithclark.co.uk/labs/css-fps/ https://www.keithclark.co.uk/labs/css-fps/

Onplana 4mo ago

I was expecting a demo on the linked page itself. Interesting to let Codex or Claude Code do it :)

geuis 4mo ago

Using css perspective for parallax has been around for years and is much simpler code.

hit8run 4mo ago

I get motion sickness from this specific effect. Especially on high refresh rate screens.