The parallax effect is very common on the landing page in modern websites. It adds a unique look to the website that attracts users a lot. You can add a parallax effect on a web page with TailwindCSS.
Creating Parallax Effect with TailwindCSS
To add a parallax effect on a background image, you have to do two steps. First, add a background image using TailwindCSS, and second is to make that image fixed so it sticks to the page. You can also make the background blur if you want to place text on the image.
You can utilize the bg-fixed
to make the background image stick to the background. This will create a parallax effect and you can place different sections on it. Here is a simple example of how to make the background image sticky.
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="flex items-center flex-col space-y-40 h-screen mb-12 bg-fixed bg-center bg-cover bg-[url(https://placekitten.com/2000)]" > <header class="bg-white w-full"> .... header content </header> </div> |
Here is the complete code of the working example that you check online as well.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 |
<div class="flex items-center flex-col space-y-40 h-screen mb-12 bg-fixed bg-center bg-cover bg-[url(https://placekitten.com/2000)]" > <header class="bg-white w-full"> <div class="mx-auto max-w-screen-xl p-4"> <div class="flex items-center justify-between gap-4 lg:gap-10"> <div class="flex lg:w-0 lg:flex-1"> <span class="h-10 w-20 rounded-lg bg-gray-200"></span> </div> <nav class="hidden gap-8 text-sm font-medium md:flex"> <a class="text-gray-500" href="">About</a> <a class="text-gray-500" href="">Blog</a> <a class="text-gray-500" href="">Projects</a> <a class="text-gray-500" href="">Contact</a> </nav> <div class="hidden flex-1 items-center justify-end gap-4 sm:flex"> <a class="rounded-lg bg-gray-100 px-5 py-2 text-sm font-medium text-gray-500" href="" > Log in </a> <a class="rounded-lg bg-blue-600 px-5 py-2 text-sm font-medium text-white" href="" > Sign up </a> </div> <div class="lg:hidden"> <button class="rounded-lg bg-gray-100 p-2 text-gray-600" type="button"> <span class="sr-only">Open menu</span> <svg aria-hidden="true" class="h-5 w-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" > <path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" /> </svg> </button> </div> </div> </div> </header> <div class="w-full flex justify-center bg-white/40 px-0 py-20"> <h2 class="text-3xl font-bold">Hero Section of Website </h2> </div> <div class="w-full flex flex-col px-40 justify-center bg-white/50 py-20"> <h2 class="text-3xl font-bold"> About Us </h2> <p class="mt-10"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perferendis dolorem eum pariatur tempora, aliquid facilis quidem culpa, enim, natus vitae qui ad voluptas distinctio? Necessitatibus laudantium repudiandae facere quidem perferendis. </p> </div> </div> <div class="max-w-lg m-auto "> <p class="mb-4"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat a magna non varius. Proin leo felis, euismod non porta eget, varius sit amet sapien. Maecenas in nulla at leo convallis consectetur id a sapien. Nulla nec pulvinar nisi. Vivamus non facilisis lacus, et volutpat libero. Nulla ac odio aliquam, accumsan arcu ut, lacinia est. Nulla eu sem elit. Fusce nec laoreet sem, semper molestie libero. </p> <p class="mb-4"> Ut sagittis lacus consequat accumsan venenatis. Sed sollicitudin, lectus et fringilla ultrices, dolor nisi scelerisque tortor, vel finibus magna massa non nunc. Phasellus massa quam, egestas a nisl sed, porta volutpat metus. Nunc sed elit ac tellus tempor cursus. Suspendisse potenti. Vestibulum varius rutrum nisl nec consequat. Suspendisse semper dignissim sem viverra semper. Nulla porttitor, purus nec accumsan pharetra, nisi dolor condimentum ipsum, id consequat nulla nunc in ligula. </p> <p class="mb-12"> Nulla pharetra lacinia nisi, vitae mollis tellus euismod id. Mauris porta dignissim hendrerit. Cras id velit varius, fermentum lectus vitae, ultricies dolor. In bibendum rhoncus purus vel rutrum. Nam vulputate imperdiet fringilla. Donec blandit libero massa. Suspendisse dictum diam mauris, vitae fermentum dolor tincidunt in. Pellentesque sollicitudin venenatis dolor, vitae scelerisque elit ultrices eu. Donec eget sodales risus, quis dignissim neque. </p> </div> <section class=" flex items-center justify-center h-screen m-auto mb-12 bg-fixed bg-center bg-cover bg-[url(https://placekitten.com/2000)]" > <div class="px-20 py-20 text-white bg-black/50 w-full "> <h2 class="text-2xl"> Another Section will go here </h2> <p class="mt-10"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero aliquam voluptates placeat soluta sint vero molestias? Nesciunt quidem perferendis voluptatum doloremque explicabo repellat reprehenderit molestias ipsa, hic est magnam quae! </p> </div> </section> <div class="max-w-lg m-auto"> <p class="mb-4"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat a magna non varius. Proin leo felis, euismod non porta eget, varius sit amet sapien. Maecenas in nulla at leo convallis consectetur id a sapien. Nulla nec pulvinar nisi. Vivamus non facilisis lacus, et volutpat libero. Nulla ac odio aliquam, accumsan arcu ut, lacinia est. Nulla eu sem elit. Fusce nec laoreet sem, semper molestie libero. </p> <p class="mb-4"> Ut sagittis lacus consequat accumsan venenatis. Sed sollicitudin, lectus et fringilla ultrices, dolor nisi scelerisque tortor, vel finibus magna massa non nunc. Phasellus massa quam, egestas a nisl sed, porta volutpat metus. Nunc sed elit ac tellus tempor cursus. Suspendisse potenti. Vestibulum varius rutrum nisl nec consequat. Suspendisse semper dignissim sem viverra semper. Nulla porttitor, purus nec accumsan pharetra, nisi dolor condimentum ipsum, id consequat nulla nunc in ligula. </p> <p class="mb-4"> Nulla pharetra lacinia nisi, vitae mollis tellus euismod id. Mauris porta dignissim hendrerit. Cras id velit varius, fermentum lectus vitae, ultricies dolor. In bibendum rhoncus purus vel rutrum. Nam vulputate imperdiet fringilla. Donec blandit libero massa. Suspendisse dictum diam mauris, vitae fermentum dolor tincidunt in. Pellentesque sollicitudin venenatis dolor, vitae scelerisque elit ultrices eu. Donec eget sodales risus, quis dignissim neque. </p> </div> |
The output of the code will look something like this.
Conclusion
Creating a parallax effect with TailwindCSS requires two steps. First, add a background image of your choice and the second is to make it stick behind the content. You can add a background image in TailwindCSS and then you can make it sticky with bg-fixed
class.