DEV Community

Cover image for Tailwind CSS parallax effect

Tailwind CSS parallax effect

Chris Bongers on December 18, 2020

Today we'll be creating a super cool parallax effect using only tailwind classes. The only CSS we need is the use of a background-image. The rest ...
Collapse
 
hunterpp profile image
Hunter Peress •

Not quite paralax, but very cool still ;-) I'll give it you ;-)

Collapse
 
pavelloz profile image
Paweł Kowalski •

Yeah, for a second I wondered if parallax changed definition to fixed background. ;)

Collapse
 
dailydevtips1 profile image
Chris Bongers •

Ah to me this is parallax haha..
I know it can also have the double negative scroll, but don't think it's a must to be parallax.

Thread Thread
 
pavelloz profile image
Paweł Kowalski •

Cool.
I always thought of it this way: w3schools.com/howto/howto_css_para...

Thread Thread
 
dailydevtips1 profile image
Chris Bongers •

Is that not using the exact same method for you?
It's a fixed background in the demo there. 🤟

Thread Thread
 
pavelloz profile image
Paweł Kowalski •

No. Fixed background is fixed background. Foreground elements scrolling with different speed than fixed background is called parallax.

Collapse
 
dimer191996 profile image
Dimer Bwimba • • Edited

anytimes.com has this effect that I can't really understand is it a paralax ? the sub popup view

Collapse
 
dailydevtips1 profile image
Chris Bongers •

I don't think this website works?

Collapse
 
dimer191996 profile image
Dimer Bwimba •

the The New York Times website lol

Thread Thread
 
dailydevtips1 profile image
Chris Bongers •

lol 😂

The sub pop-up is different actually.
Not sure what you would call that to be honest.

Thread Thread
 
dimer191996 profile image
Dimer Bwimba •

can you make an article or tutorial about it lol

Thread Thread
 
dailydevtips1 profile image
Chris Bongers •

I'll see what I can do Dimer 👀