CSS-Native Parallax Effect(dan-webnotes.com)
44 pointsby dandep2 hours ago9 comments
  • mpeg2 hours 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

    • dandep10 minutes 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.

    • soman hour 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)

    • iainmerrickan hour 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.
  • baliex2 hours ago
    That sounds interesting but it would be a whole lot more interesting if the page was itself an example of said effect!
    • dsmurrell17 minutes ago
      I was also looking for examples.
  • phelm2 hours ago
    A demo https://codepen.io/editor/phelm/pen/019e87f5-dfec-7372-9849-...
    • frereubu2 hours 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
      • wnevets24 minutes ago
        Doesnt work on any browser for me
      • WithinReasonan hour ago
        tried 4 browsers, didn't work in any of them
        • alpinismean hour ago
          FWIW it works on iPhone safari
      • werdnapkan hour ago
        It's been behind a flag for ages. Maybe because of performance issues?
      • anssipan hour ago
        Noticed the same thing. In Mac Safari it works without setting any flags.
    • Mashimoan hour ago
      Only worked for me on mobile (vivaldi android) not on vivaldi / chrome / edge on Desktop.
    • account42an hour ago
      What an age where we need a pile of javascript as well as a bot check to demo a simple CSS trick.
      • zamadatix33 minutes ago
        The JS and bot check are for making additional functionality, beyond just showing the example, work easily. I.e. editing and sharing edits from a browser. If all you want is a static example, feel free to make it without these things.
  • thomasikzelfan hour 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)
    • rsyring22 minutes ago
      Android Firefox: there is no background image.
      • thomasikzelf9 minutes 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.
  • duskdozeran hour 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.
  • i_am_a_peasant10 minutes ago
    Idk about anyone here but I find the effect disorienting.
    • amon_spek3 minutes ago
      Yes. I'm a little more sensitive than average, but not enough to turn off animations, and this is uncomfortable.
  • sillyboian hour ago
    It would be awesome to put an interactive example right in the article.
  • rohitsriraman hour ago
    Love the one-variable design where scale and translate stay in sync automatically, just wish Firefox would get off the flag already.
  • xuzhenpeng44 minutes ago
    [flagged]