- This topic is empty.
-
AuthorPosts
-
November 29, 2017 at 1:21 am #263063hakilebaraParticipant
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)?
November 29, 2017 at 7:43 am #263083ShikkedielParticipantI 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”…
November 29, 2017 at 10:49 am #263092ShikkedielParticipantNever 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…
November 29, 2017 at 11:40 am #263094ShikkedielParticipantAdded a fix for Firefox,
transform-style: preserve-3d
on the wrappingdiv
.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.
December 1, 2017 at 4:50 am #263197hakilebaraParticipantThank you for your answer and example.
I agree, sometimes there is no choice but to use scroll events. -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.