How to Create Parallax Effect in Tailwind CSS ?

A parallax website includes fixed images in the background that are kept in place and the user can scroll down the page to see different parts of the image. If you use the parallax effect on our page then it helps the user to interact with the page.

Preview

Creating Parallax Effect in Tailwind CSS

At first create a HTML structure and include the Tailwind CSS CDN link.
Then create a HTML div with "h-screen" class to create each section. Within each section, include a HTML div for the background image and another div for content.
Use the Tailwind CSS classes for layout and styling, such as "bg-no-repeat", "bg-cover", "bg-fixed", "absolute", "inset-0", "flex", "justify-center", "items-center", etc.
Then add JavaScript to handle the parallax effect on scroll. Iterate through each parallax element and adjust its transform property based on the scroll position to create the parallax effect.

Example: This example shows the implementation of the above approach.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Parallax Effect</title>
    <link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
        rel="stylesheet">
</head>

<body class="overflow-x-hidden bg-blue-400">
    <div class="relative h-screen overflow-hidden">
        <div class="absolute inset-0 bg-no-repeat bg-cover 
                    bg-fixed parallax-bg"
            style="background-image: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20240322101847/Default_An_illustration_depictin-(2)-660.jpg');">
        </div>
        <div class="absolute inset-0 flex justify-center items-center">
            <div class="text-center bg-green-400 mt-4">
                <h1 class="text-3xl text-white mt-5">
                    Welcome to Tailwind CSS Parallax Effect
                </h1>
                <p class="text-lg text-white mt-5 ml-4">
                    Elevate your web design with stunning parallax effects
                    using Tailwind CSS. Impress your visitors and create
                    engaging
                    user experiences with minimal effort. Whether you're a
                    beginner
                    or an experienced developer, Tailwind CSS makes it easy to
                    implement parallax scrolling and bring your designs to life.
                </p>
            </div>
        </div>
    </div>
    <div class="relative h-screen overflow-hidden">
        <div class="absolute inset-0 bg-no-repeat bg-cover 
                    bg-fixed parallax-bg"
            style="background-image: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20240308154939/html-(1).jpg');">
        </div>
        <div class="absolute inset-0 flex justify-center items-center">
            <div class="text-center">
                <h1 class="text-4xl text-green-300">HTML</h1>
                <p class="text-lg text-white">
                    Tailwind CSS is a utility-first CSS framework that allows
                    you to build custom designs rapidly. With its intuitive
                    class-based approach, you can easily create responsive 
                      and visually appealing layouts without writing custom CSS. 
                      Tailwind provides a comprehensive set of pre-built utility 
                      classes for styling elements,making it easy
                    to customize every aspect of your design.
                    Whether you're a beginner or an experienced developer,
                    Tailwind CSS empowers you to create modern and beautiful
                    websites
                    with ease.
                  </p>
            </div>
        </div>
    </div>
    <div class="h-96 bg-green-500 w-full">
        <div class="flex flex-col justify-center 
                    items-center h-full">
            <h2 class="text-3xl font-bold text-white mb-4">
                Experience the Parallax Effect
            </h2>
            <p class="text-lg text-white ml-4">
                Discover the mesmerizing world of parallax scrolling with
                Tailwind CSS.
                Create stunning visual effects and captivate your audience with
                immersive web experiences. Whether you're building a portfolio,
                showcasing products, or telling a story, parallax adds depth
                and intrigue to your website.
            </p>
        </div>
    </div>
    <script>
        // Add JavaScript to handle parallax effect on scroll
        window.addEventListener('scroll', function () {
            const parallaxElements = 
                  document.querySelectorAll('.parallax-bg');
            parallaxElements.forEach(function (element) {
                let scrollPosition = window.pageYOffset;
                element.style.transform = 
                      'translateY(' + scrollPosition * 0.5 + 'px)';
            });
        });
    </script>
</body>

</html>

Output:

Output : Parallax Effect in Tailwind CSS

Article Tags :

CSS

Web Technologies

Tailwind CSS-Questions