Parallax scrolling effect - Tailwind CSS

in this video we'll create a parallax effect using HTML and Tailwind CSS I'm going to code on play.tailwindcss.com let's create our first section using a Dev tag I'll add an H2 tag and let's write Parallax inside it in a Dev tag let's add a minimum height screen class to Center our text I'm going to add display Flex justify Center and finally item Center to add a background image let's head to the config section if you are working on the S code or any other IDE open your tailwind.config.js file under the extend key create a background image property now let's add the name of our first image add a colon then we'll add the images URL an important thing to notice here if you are writing the URL inside single quotation marks then you have to paste the link inside double quotation marks now paste the image URL I'll edit the image name as I'll add more images if you are adding multiple images don't forget to separate them by a comma now let's head back to the HTML section to use the background image all you have to do is type BG Dash the name we have set in the config file that is C1 and here you can see our background image as a suggestion let's customize our text I'll add a font black class and a text 6X large class next we'll create a section that will display a title and a text let's start with a div and H2 for the title A P tag for the text if you want to generate alarm text just type lorem followed by the number of words you want to generate hit enter and there you go let's quickly style our title I'll add a font bold class and a text 4X large class I'll add a padding of 10 to the Dev tag now if we scroll up and down the page everything is normal to start our Parallax effect let's head to the first Dev tag and add a background fixed class if we scroll now the background will remain in the same position next let's create another Dev tag to the config file let's name our second image C2 and add the URL back to the HTML file let's set the background image and give it a minimum height screen class now let's scroll and check everything increase the horizontal view so you can check how will the page appear on larger screens notice how the images are aligned to the left by default another default Behavior here the background image is repeating and we don't want that to disable repeating add the BG no repeat class let's check that nice now the problem is with our background image size to fix that let's add the BG cover class so the image will cover the full width and height of the container while keeping the original aspect ratio perfect in some cases you might need to change the background image position and of course this will depend on the image itself let's try to Center the image to do that add the BG Center class now notice how the image will remain centered no matter what the screen size is let's check the second image BG Center will Center the image horizontally BG top will position the image to the top which is the default Behavior BG right top will position it to the right top and so on for this image I'll place it at the center apply the BG no repeat class and don't forget to add the BG cover so it will cover the full width and height now let's add one more image below again I'll start with a Dev tag let's head to the config file and add our last background image now let's add it here in the dev and again we'll give it a minimum height screen class here's how our page looks right now when we scroll let's add the gfix class to the second image and try scrolling nice now for the last image you can apply the same effect which is the G fixed remember we have to fix the repeat Behavior and the object fit property to cover scroll and check the result perfect let's try to remove the BG fixed class from the second image now I will scroll normally with the previous text section for me I'll keep it fixed so this is the very basic concept of Parallax effect and this is our final result for today I would like to thank you guys for the likes and comments I've been receiving I really appreciate it thank you for watching

Channel: Mo web dev

Views: 15,750

Keywords: tailwind, tailwindcss, tailwind-css, css, front-end, front end web, web design, web development, html

Id: hgNlqcmpomM

Length: 7min 10sec (430 seconds)

Published: Mon Nov 21 2022