Skip to main content

Make a Simple Parallax Scrolling Effect for beginners

    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.css


html, 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:
Labels:

Comments

Post a Comment

Popular posts from this blog

Auto Image Slider using CSS Only

     Are you ready to learn how to create an image slider using only CSS? Look no further! In this tutorial, we'll walk you through the step-by-step process of building a sleek and modern image slider using HTML and CSS. No JavaScript required! In this tutorial We'll cover setting up the HTML structure for the slider.       This will include creating the container element and styling the slider with CSS. You'll also learn how to add transitions and animations to create a smooth sliding effect. By the end of this tutorial, you'll have a fully functional image slider that you can use on your own website. Whether you're a beginner or an experienced developer, this tutorial has something for you. So let's get started creating your own image slider using CSS today! index.html <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/style.css"...
Post a Comment
Read more

Image with Accordion Effect on Hover using CSS and HTML

     Hey there, folks! Are you looking to jazz up your website's image galleries? Well, you've come to the right place! In this tutorial, we'll show you how to create an image with accordion effect on hover using HTML and CSS. First off, let's chat about HTML and CSS. HTML is like the building blocks of web pages, while CSS adds style and personality to your website.       By combining these two, you can create some seriously cool designs that'll knock your user's socks off!In this tutorial, we're gonna be using CSS animation effects to make an accordion effect on an image when a user hovers over it. It's a slick way to add a bit of movement and interactivity to your web design. To get started, we'll walk you through creating a basic HTML structure for your image.       Then, we'll apply some CSS styles to give it that fancy accordion look. Finally, we'll create a hover effect using CSS animation that'll make your image expand and...
Post a Comment
Read more

Glass Fill Effect using CSS Only

     In this tutorial, we will be creating a glass fill animation effect without using any SVG graphics or JavaScript. We will be using only CSS to create the animation. This animation is perfect for creating a liquid filling effect on a website. The tutorial is easy to follow and can be implemented on any website. So, if you're looking to add a cool animation effect to your website, this tutorial is for you. With this method, you can create a realistic looking glass fill animation effect without the need for any additional graphics or libraries.  index.html <html> <head> <title>TUTORIAL</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="glass-ctr"> <div class="glass"></div> <div class="water-ctr"> <div class="water"></div> ...
Post a Comment
Read more