In this Tutorial, we will show you how to create a simple parallax scrolling effect using only CSS. Parallax scrolling is a popular web design technique where background images move slower than foreground images, creating a 3D illusion as you scroll down the page. We'll be using CSS transforms and transitions to achieve this effect, so no JavaScript is required. Whether you're a beginner or an experienced web developer, this tutorial will provide you with the knowledge you need to add a touch of depth and movement to your website. So sit back, relax, and enjoy the tutorial.
index.html
<!DOCTYPE html> <html> <head> <title>Parallax Scrolling</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="style.css"> <link href="https://fonts.googleapis.com/css?family=Montserrat|Mr+Dafoe" rel="stylesheet"> </head> <body> <div class="plx-image1"> <div class="text1">Parallax</div> <div class="text2">Scroll down to see the effect</div> </div> <div class="content-1"> <div class="text3">KEEP ON SCROLLING</div> <div class="text4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div> </div> <div class="plx-image2"></div> <div class="content-2"> <div class="text5">THANKS FOR WATCHING</div> </div> </body> </html>
style.csshtml, body{ margin: 0px; height: 100%; overflow-x: hidden; } .plx-image1{ background-image: url(images/image\ 1.jpg); text-align: center; width: 100%; height: 900px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } .text1{ font-size: 280px; padding-top: 200px; font-family: 'Mr Dafoe', cursive; color: #FFFFFF; -webkit-text-fill-color: rgba (255, 255, 255, 1); text-shadow: -3px -3px 12px #313a49; -webkit-transform: skew(-5deg,-5deg); transform: skew(-5deg,-5deg); font-weight: normal; } .text2{ font-size: 40px; color: white; margin: 0 0 20px 0; font-family: 'Montserrat', sans-serif; } .content-1{ height: auto; width: 100%; background-color: #f2f2f2; text-align: center; } .text3{ font-family: 'Montserrat', sans-serif; font-size: 80px; background-color: #f2f2f2; padding-top: 50px; } .text4{ width: 70%; margin-left: 15%; padding: 30px 0 80px 0; font-family: 'Montserrat', sans-serif; font-size: 20px; background-color: #f2f2f2; letter-spacing: 0.1em; line-height: 1.8; } .plx-image2{ background-image: url(images/image\ 2.jpg); text-align: center; width: 100%; height: 800px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } .content-2{ height: auto; width: 100%; text-align: center; background-color: #f2f2f2; } .text5{ font-family: 'Montserrat', sans-serif; font-size: 100px; padding: 80px 0 80px 0; letter-spacing: 0.2em; }
Watch Full Video Here:
Comments
Post a Comment