Originally posted on my blog
In this post, we're going to make a nice Parallax effect with HTML, CSS and just 10 lines of JavaScript.
You can c...
For further actions, you may consider blocking this person and/or reporting abuse
As a performance improvement, move the document.querySelector calls outside the scroll event listener, assigned to variables. That way, the browser only has to traverse the DOM once instead of on every scroll event which is what’s happening now. And then, look into throttle to limit the handler calls as scroll fires at a very high rate.
Best.
You're absolutely right. I always use selectors in that way. For a real apps, i should control the scroll with a debounce function, but for this quick may be it's not mandatory. So thanks again for your very useful comment.
Just as an FYI for anyone reading. As a reminder, these types of things are basically an anti-pattern for UX and accessibility. They may be fancy and pretty at face value, but suffer issues in different user agents and for screen readers. These tend to suffer even more when transitioning between touch, mouse wheel, mouse drag, scroll bar, arrow keys, and page up/down keys. And that's before even getting into javascriptless browsing.
Nice one!
See also: this trick with perspective and translateZ properties
alligator.io/css/pure-css-parallax/
On fire!
Thanks for sharing your resource.
Can I share it on my blog?
Yes of course you can.
What about thousand lines of css? ^
Nice article!
where ??
Thank you, Mr Ibrahima
If you reduce the height of the window, you can scroll forever 😁
It's not that much responsive, i will soon.
This effect doesn't look that good. However, strip away the parts that degrade user experience, and it's an excellent base for a stunning parallax effect.