DEV Community

Cover image for How To Create an awesome Parallax Scrolling Effect
Stackfindover
Stackfindover

Posted on • Updated on

How To Create an awesome Parallax Scrolling Effect

Hello guys, In this article 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 to create awesome animations.

See Also: GSAP Animated Carousel Slider

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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
})
Enter fullscreen mode Exit fullscreen mode

Parallax scrolling effect codepen

Discussion (0)