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
 
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 👀

Thread Thread
 
dimer191996 profile image
Dimer Bwimba

still waiting tho

Thread Thread
 
dailydevtips1 profile image
Chris Bongers

I can't remember which effect this was again.
Where can I find it?

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.

Thread Thread
 
hunterpp profile image
Hunter Peress

These are parallax ;-) awwwards.com/30-great-websites-wit...