Forums

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
    Posts
  • #263063
    hakilebara
    Participant

    I am trying to replicate this scroll animation: https://dribbble.com/shots/2208939-Principle-Parallax-Scroll

    Here is what I have so far: https://codepen.io/hakilebara/pen/eeWvjy?editors=0110

    Can I have some feedback? How would you do this? Is it possible to do it without relying on the scroll event (https://developers.google.com/web/updates/2016/12/performant-parallaxing)?

    #263083
    Shikkediel
    Participant

    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”…

    #263092
    Shikkediel
    Participant

    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.

    codepen.io/anon/pen/XzyWgy

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

    #263094
    Shikkediel
    Participant

    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.

    #263197
    hakilebara
    Participant

    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.