True parallax with CSS-only is now possible

Parallax effects can be cool, but I’m always told the CSS-only solutions aren’t “true” parallax. Well, thanks to scroll-timeline: scroll(), we can now create true parallax effects without one line of JS and have complete control over the speed of each layer.

🔗 Links

⌚ Timestamps
00:00 - Introduction
01:10 - How we need to set up our HTML
02:45 - Stacking everything with CSS
04:45 - Creating the animation for the parallax
05:44 - Applying the animation to when the user scrolls with animation-timeline scroll()
08:00 - Changing the “speed” of each element
12:15 - Making sure the elements don’t go in front of other content
13:40 - Overflow hidden doesn’t work
15:08 - Browser support and a polyfill

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[KevinPowell]

Instead of the overflow issue I showed, as a commenter said below, we can use contain: paint; and it works!. Also, I have a general rule that I won't make videos about a CSS feature until it's supported by at least two browsers, but with a polyfill available (linked in the description) I decided to break my own rule 🙂

[richardhindle]

This will be perfect for my next project. I'll be trying this tomorrow. This video earns a beer on me.

[dreejz]

Can't wait for that deep dive on the animation-timeline, thanks as always Kevin!

[rumbazumba]

This is insane, opens up so much possibilities not just with parallax but a lot of other stuff that we previously did with JS

[mianmohsin]

following kevin for like 1 year and whenever i stuck in any css problem . i jumped right in to your channel without a thought.. youre amazing sir❤❤

[Yojmb]

13:41 I believe you can use overflow:hidden if you instruct the CSS scroll function to bind to the root element - using scroll(root)

[dannievinther]

In regards to the issue pointed out about setting overflow to 'hidden', you could easily just pass 'root' in the scroll() function, which I guess would create a similar result

[uhkeyy]

after looking through hella articles and yt videos this was the final one that helped me understand parallax lol

[florian]

Thank you, dear human of knowledge, i highly enjoyed making progress with css, and i am grateful for your existence. My Website has come to a point i cant descibe with my own weak words. All i can say is you saved my website, thank you, highly appreciated person.

[mocostartup]

Great video Kevin! Couldn't think of a better example 🤙

[diegomartinezgarcia]

00:01 True parallax with CSS-only is now possible.
01:47 Create a parallax effect with CSS-only
03:32 True parallax with CSS-only is now possible
05:19 Using CSS animation timeline for parallax effect
06:56 True parallax can be achieved using CSS-only
08:44 Adjusting the Parallax speed
10:34 True parallax with CSS-only allows for moving different elements at different speeds
12:25 To solve the issue of elements escaping, a new stacking context is created within the parallax area using position relative and z-index.
14:21 True parallax effect with CSS-only is possible
16:09 True parallax with CSS-only is now possible

[abdelhaktamraoui]

you are my insperation Kevin, you actually made me change my view on css for the better 😁

[spatialoptic]

Inspiration for my next website project starting next week! Thank you!!!

[kingshanaman]

I can't believe how easy this thing is. Thanks for the great explanation 👌

[noahr]

Dang, this looks so easy to use as well. Great video as always!! You're the css master 😎

[nilaallj]

The Webkit team has given this spec a positive standards position, so we can count on Safari getting support at some point. Hopefully not too far in the future.

[bramus]

As you mentioned, the problem with `overflow: hidden` is that it creates a scroller. Instead of creating a named scroll-timeline as a way out of this, an easier way is to simply set `overflow` to `clip`. It does the same as `overflow: hidden`, but where it differs is that `overflow: clip` does not create a scroller.

Furthermore, have you checked out `animation-range`? For this demo I’d go for `animation-range: 0vh 100vh` so that the animations are no longer affected by the page length.

[NiceChange]

Thanks Kevin. This really helps turn CSS in to art and a very interactive site.

[howdyhowdyhowdyhowdyhowdy]

It's an exciting time to be a web developer!

[heavylogc]

This is like the most awesome thing in CSS I've seen in years. Cuz I like parallax a lot. Fingers crossed for Safari, I hope they will add support for this eventually.