Create a layered parallax effect with HTML & CSS

There are different ways to create parallax effects, but using mask-image might be the one that, without any JavaScript at least, is the most interesting! It takes some time to create the mask, but it can be well worth it!

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:38 - Setting things up for this to work
02:00 - Creating the mask
03:43- Creating the parallax effect
07:17 - Making the text more readable

#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!

[naveenramkumar]

This is exactly what Ive been looking for. you have no idea how many times ive tried to browse through your videos to find a video regarding this.

[dpasalic]

For a case like this i think it is better and easier to place png (hill in this case) on top of background image (stars) and hide header behind png using z-index

[worthex_]

You just read my thoughts every time. Thank you for the video!

[SVGc]

Very creative way to make parallax elements with SVG masks... Well done again, Kevin!

[Nicole-uiqj]

Hey, Kevin! Love the video. It would be interesting to see a video on creating button micro-animations like YouTube's new like button in HTML & CSS!

[Dawiczku]

That's a pretty cool way to make that effect, since I started playing with CSS i fell in love with parallax sites, but I've always done it with the z-indexes and transform properties.
I wish ya'll a good day ! 😁

[sharkinahat]

I kind of hate that it's called a parallax effect in the css/html world. There should be at least 2 background layers moving at different rates else it's just (tm).

[Okgrandpa]

I did this as my first dev job for a client back in Feb but using the transform z-axis and perspective because I had lots SVG elements that needed to move independently

[mackiver]

Thank you for sharing :), i have been looking for something similar and apply it on my existing preview page.

[Iamafuckingmadlad]

Yo....this man reads my mind, I swear.

[MartinJoergensen]

Great effect! Simple and easy. Yay!
But I have to agree with those who say that this isn't truly parallax. Parallax in my eyes requires a steady background and two (or more) layers moving at different speeds in a - well - parallax manner when you scroll, imitating perspective and giving the impression of different distances to the background.
I have seen examples in CSS using some intricate transform and scale with 3D preservation. I have even tried to implement it a couple of times myself, but to no avail - mostly because the markup delivered by the CMS has been unsuited for the code I found.
An example of "true" parallax would be a great video subject.

[TheRavageFang]

Additionally you could control the opacity of the background color when scrolling down to the bottom to darken the scene even more 🤔

[aviralvikram]

I just started learning about parrallax scroll and a few minutes Beep(notification)
Kevin powell uploaded a video on
"Parrallax”

This just shows you are always ready show us some new magic tricks.
Always giving us more fun things to do with css and making us Fall in love with it More and More.

[goooooodday]

correct me if im wrong but i think this kind of effect can also be achieved by applying different z indexes on the images and then just give the header a fixed or sticky position property with a z index between the mountain and sky images

[SerilaBuck]

i had to do a parallax effect on a herobanner at work but it was several element moving at various speed relative to the scroll of the page. but not fixed .

I ended up using canvas, redrawing it on each scroll event but on the way there at one point, I had jus a js script capturing the Window.scrollY vallue and affected it to a custom propertie. then my parrallax elements had the top properties be something like top: calc(0.4 * var(--scroll-value)); and top: calc(0.8 * var(--scroll-value)) ; (or it was translateY, i don't remember)

while I did ended up using canvas instead as I found the animation more fluid, I think it was a nice way of doing it... if you can ignore IOS safarie completely chocking up on it.

[proteus]

Can you do more on accessibility regarding the Dom structure. Also why are websites in filing cabinets. Surely we should be more advanced using all websites as a pullout file?

[annazhukovskaya]

Thank you very much for the video! Cool and useful info. I have a question - if there is a title which is partially hidden behind the image - I need to use parallax effect as well ? Thanks in advance

[hxiszue]

How so you make a html/css only parallax work for safari?

[metalstarver]

When I saw title I thought you would do parallax like it's done in old games, where layers move at different speed, to create 3D feel. Turns out a bit different. Good trick nonetheless.

[giovanni_pagliuca]

hi Kevin!
One of the most common problems that i have with CSS is to keep a heading table (thead) fixed while scrolling.
Is there a way to do it without wrap everything inside divs etc?