![]() Only with the help of GSAP and this forum was I able to accomplish my project.” Louis Hoebregts “This is by far the fastest and most active community I've ever seen for getting personalized answers to questions. “I will never say it enough but you are absolutely amazing and you have no idea how much time and brain cells I have spared thanks to you □”.It should literally be part of the next Javascript update.” Thank god for GSAP “GSAP should be the default when it comes to Javascript animations. Every time I use GSAP it saves me heaps of time and frustration. Jeff Batt, “It's so correct that GSAP's logo is a superhero. This the first time I feel this way about a library.” ![]() Joseph Labrecque, “Reading through the GreenSock docs been amazed like 14 times so far! How can a library be SO complete? Been using that for about 2 years now but man. GreenSock is incredible in its own right, but the team behind it is really what makes it “Really quite impressed with JS - even the small things.” ![]() “I've never worked with a product that has such fantastic and enthusiastic support.Thank you for reading, and let's connect! Tailwind CSS parallax effect by Chris Bongers ( CodePen. You can find this full demo in this Codepen. The whole text block also uses the same classes as the header block. Parralax inline Īs you can see all the other classes are the same. With this, we also need to add m-auto, which will center it horizontally. That is almost the same setup, except in this case, we add a container class to make it not 100% wide. That's all cool and well, but now you want a parallax effect not only for the header but between two text areas. That's it! We now have our CSS parallax effect with a background image, which is always 100% of the viewport height. rounder-xl: Adds the nice rounder borders.bg-opacity-50: This one makes sure the background has an opacity of 50%.bg-purple-300: A nice cool purple color.text-2xl: Makes the text nice and big (1.5rem).p-5: Adds equal padding on each side (1.25rem).Then for our overlay box, we use the following: custom-img: Custom class to add our background image.bg-cover: Makes sure the background is covering the whole header element.bg-center: This makes sure the background is centered.bg-fixed: This is the magic that makes the parallax effect, the background-fixed makes sure the background stays where it's set.mb-12: We add quite a big margin-bottom with this (3rem).h-screen: This adds a 100vh height, so it's 100% of the viewport.justify-center: Aligns the text-block horizontally.items-center: Aligns the text-block vertically.flex: Adds a display flex so we can align the text block inside.I'll post the full class list and guide you through each class and what it's used for. Now we want to make this header full height with a background image that will cover the area. The div will hold some text just to show the parallax effect better. We'll be using the header tag with a div inside. We'll start by creating the header using Tailwind classes. You can see the end result in the following GIF: In this Tailwind example, we will be using it for the header and an inline section. The main idea is that a background image stays at a fixed position while you scroll over it. I've made a full CSS parallax effect before I've you are interested in seeing how it works. The rest will be build using Tailwind classes. ![]() The only custom CSS we need is for a background-image. Today we'll be creating a super cool parallax effect using only Tailwind CSS. Learn how to create a parallax effect with a background image using only Tailwind CSS.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |