DEV Community

Cover image for Tailwind CSS parallax effect
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

Tailwind CSS parallax effect

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 will be build using Tailwind classes.

I've made a full CSS parallax effect before I've you are interested in seeing how it works.

The main idea is that an image stays at one position while you scroll over it.

In this Tailwind example, we will be using it for the header and an inline section.

You can see the end result in the following GIF.

Tailwind CSS parallax effect

Tailwind CSS parallax header

We'll start by creating the header using Tailwind classes.

Let's define our HTML structure first.

<header>
  <div>
    Welcome to my site!
  </div>
</header>
Enter fullscreen mode Exit fullscreen mode

We'll be using the header tag with a div inside. The div will hold some text just to show the parallax effect better.

Now we want to make this header full height with a background that will cover the area. The image must also be centered.

I'll post the full class list and guide you through each class and what it's used for.

<header
  class="flex items-center justify-center h-screen mb-12 bg-fixed bg-center bg-cover custom-img"
>
  <div class="p-5 text-2xl text-white bg-purple-300 bg-opacity-50 rounded-xl">
    Welcome to my site!
  </div>
</header>
Enter fullscreen mode Exit fullscreen mode

The classes used for the header:

  • flex: Adds a display flex so we can align the text block inside
  • items-center: Aligns the text-block vertically
  • justify-center: Aligns the text-block horizontally
  • h-screen: This adds a 100vh height, so it's 100% of the viewport.
  • mb-12: We add quite a big margin-bottom with this (3rem)
  • bg-fixed: This is the magic that makes the parallax effect, the background-fixed makes sure the background stays where it's set.
  • bg-center: This makes sure the background is centered
  • bg-cover: Makes sure the background is covering the whole header element
  • custom-img: Custom class to add our background image.

Then for our overlay box, we use the following:

  • p-5: Adds equal padding on each side (1.25rem)
  • text-2xl: Makes the text nice and big (1.5rem)
  • text-white: Make the text white
  • bg-purple-300: A nice cool purple color
  • bg-opacity-50: This one makes sure the background has an opacity of 50%.
  • rounder-xl: Adds the nice rounder borders

That's it! We now have our parallax header, which is always 100% of the viewport height.

Tailwind CSS parallax section

That's all cool and well, but now you want a parallax effect between two text areas.

That is almost the same setup, except in this case, we add a container class to make it not 100% wide. With this, we also need to add m-auto, which will center it horizontally.

<section
  class="container flex items-center justify-center h-screen m-auto mb-12 bg-fixed bg-center bg-cover custom-img"
>
  <div class="p-5 text-2xl text-white bg-purple-300 bg-opacity-50 rounded-xl">
    Parralax inline
  </div>
</section>
Enter fullscreen mode Exit fullscreen mode

As you can see all the other classes are the same.
The whole text block also uses the same classes as the header block.

You can find this full demo in this Codepen.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (15)

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