Hacker news

  • Top
  • New
  • Past
  • Ask
  • Show
  • Jobs

CSS-Native Parallax Effect (https://dan-webnotes.com)

146 points by dandep 5 days ago | 58 comments | View on ycombinator

baliex 5 days ago |

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

mpeg 5 days 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

sheept 4 days 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-webs...

[1]: blog: https://www.keithclark.co.uk/articles/pure-css-parallax-webs...

[2]: https://www.keithclark.co.uk/labs/css-fps/

thomasikzelf 5 days 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 (the background)

Semaphor 4 days 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

[1]: https://bugzilla.mozilla.org/show_bug.cgi?id=1676780

[2]: https://bugzilla.mozilla.org/show_bug.cgi?id=1676781

mrcsmcln 4 days 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.

sillyboi 4 days ago |

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

duskdozer 5 days 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.

tantalor 4 days ago |

Hey, where's the demo?

Theodores 4 days 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.

rohitsriram 5 days ago |

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

Onplana 4 days ago |

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

hit8run 4 days ago |

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

geuis 4 days ago |

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

thecaio 4 days ago |

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

i_am_a_peasant 4 days ago |

Idk about anyone here but I find the effect disorienting.

albert_e 4 days ago |

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

undefined 4 days ago |

undefined

xuzhenpeng 4 days ago |

[flagged]

swordlucky666 4 days ago |

[dead]