Event listeners will fire many times, which could cause your application to exhibit jank. Here are some ideas on
binding to the scroll event and doing something interesting, like flipping through photos, implementing a sticky navigation, or a custom parallax experience.
Poor Man's Way
Bind Scroll Event
Our method will handle the scroll event, bound to the window.
window.addEventListener('scrollAction', scroll) scrollAction => // handler
Our event will fire many times, but we really only need 60fps, so we can throttle our handler.
scrollAction => event.throttle()
Animating When a Frame is Available
Throttling our event is better than nothing, but there are times when we need to have more control over when the animation enters the next frame. If the window is in the background, or the application is busy, we can have the scroll happen when the frame is available.
- Don’t use scroll events or background-position to create parallax animations
- Use CSS 3D transforms to create a more accurate parallax effect.