How To Create a Parallax Scrolling Effect

Hello guys, In this video we will learn how to create simple parallax scrolling effect using GASP ScrollTrigger

What is Gsap?

GSAP (Greensock Animation API) is an animation library that helps you create awesome animations. It can be used safely (back to IE6!) to create animations without jank, and it’s the only animation library (as far as I know) that handles SVG animations seamlessly.

How To Create a Parallax Scrolling Effect step by step

Step 1 — Creating a New Project

In this step, we need to create a new project folder and files(index.html, style.css, main.js) for creating scrolling effect. In the next step, you will start creating the structure of the webpage.

Step 2 — Setting Up the basic structure

In this step, we will add the HTML code to create the basic structure of the project.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Parallax Effects Using GSAP ScrollTrigger</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">

</head>
<body>
    
</body>
</html>

This is the base structure of most web pages that use HTML.

Add the following code inside the <body> tag:

<section>
    <img src="bg.jpg" id="bg">
    <img src="jet.png" id="jet">
    <img src="hulk.png" id="hulk">
  </section>
  <div class="sec">
    <div class="content">
      <h2>Robert Bruce Banner - I'm Hulk.</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
        standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
        a type
        specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
        essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem
        Ipsum passages,
        and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        <br>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
        standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
        a type
        specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
        essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem
        Ipsum
        passages,
        and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
    </div>
  </div>

In the next few steps, we will add the styles for each section using the classes which is we added in the HTML.

Step 3 — Add Gsap ScrollTrigger library and main js file

<!-- Gsap ScrollTrigger-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"
  integrity="sha512-cdV6j5t5o24hkSciVrb8Ki6FveC2SgwGfLE31+ZQRHAeSRxYhAQskLkq3dLm8ZcWe1N3vBOEYmmbhzf7NTtFFQ=="
  crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/ScrollTrigger.min.js"
  integrity="sha512-Q+G390ZU2qKo+e4q+kVcJknwfGjKJOdyu5mVMcR95NqL6XaF4lY4nsSvIVB3NDP54ACsS9rqhE1DVqgpApl//Q=="
  crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!--  -->
<script src="main.js" charset="utf-8"></script>

Step 4 — Adding Styles for the Classes

In this step, we will add styles to the section class Inside style.css file

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'IBM Plex Sans', sans-serif;
}

body {
  background: #374f1f;
}

section {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

section:before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(to top, #374f1f, transparent);
  z-index: 100000;
}

.sec {
  position: relative;
  padding: 100px;
}

h2 {
  font-size: 2.5em;
  color: #fff;
  margin-bottom: 10px;
}

p {
  font-size: 1.2em;
  color: #fff;
}

img#bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

img#jet {
  position: absolute;
  top: 180%;
  z-index: 10000;
  width: 100%;
  transform: scale(0);
}

img#hulk {
  position: absolute;
  right: 800px;
  top: 0;
  max-width: 100%;
  transform: scale(0);
}

Step 4 — Adding Js Code

In the final step we have to do code for main.js

gsap.to("#bg", {
    scrollTrigger: {
        scrub: true
    },
    y: 200,
    scale: 1.2
})

gsap.to("#jet", {
    scrollTrigger: {
        scrub: true
    },
    x: -200,
    y: -1800,
    scale: 1.2
})

gsap.to("#hulk", {
    scrollTrigger: {
        scrub: true
    },
    x: 1000,
    y: 200,
    scale: 1.5
})

Parallax scrolling effect codepen

#html #css #gsap #scrolltrigger #javascript