The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Feedback needed: Parallax vertical scroll animation

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #263063

    I am trying to replicate this scroll animation:

    Here is what I have so far:

    Can I have some feedback? How would you do this? Is it possible to do it without relying on the scroll event (


    I tend to get a bit obstinate when certain claims are made about the scrolling event… often people are referring to a time when it could indeed be problematic because of the device’s capabilities. These days, they’ll have no issue with it when the script is optimised.

    In older versions of Mobile Safari scroll events were actually delivered at the end of the scroll, which made it impossible to make a JavaScript-based scroll effect.

    Not true, it would just be very convoluted to keep track of any touch movements during panning.

    In most browsers scroll events are delivered as “best-effort” and are not guaranteed to be delivered on every frame of the scroll animation!

    Actually, you usually don’t even want that because you don’t need 60 frames a second to make a smooth looking animation. If anything, you’d throttle down the events to about 25 frames max. If the browsers starts skipping steps, the script is either just too demanding or other stuff is hogging resources.

    Not to say a transform isn’t a neat approach, I just mildly object to these given “facts”…


    Never mind this for now (example I posted isn’t working in Firefox)…

    Edit – here it is anyway, for some reason the extra div parent breaks things in Firefox. Leaving it out makes the total overflow not being calculated correctly in Opera. I’ll look into that.

    I don’t quite understand yet where the left margin comes from either. It’s merely a quick fiddle…


    Added a fix for Firefox, transform-style: preserve-3d on the wrapping div.

    Does anybody have an idea why the content is showing outside of the container now though? Really weird, it only happens when you start scrolling. I don’t see any clues on Google about this.


    Thank you for your answer and example.
    I agree, sometimes there is no choice but to use scroll events.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.