How To Create a Parallax Scrolling Effect

Hello guys, In this article we will learn how to create a 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.

See Also: GSAP Animated Carousel Slider

gsap

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 a 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 5 — 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
})

#Final Result

Parallax scrolling effect codepen

#1 Parallax scrolling gsap

Parallax scrolling gsap

Parallax gsap scrolling animation using HTML CSS and JavaScript, which was developed by isladjan. Moreover, you can customize it according to your wish and need.

Author:isladjan
Created on:June 28, 2020
Made with:HTML, CSS & JavaScript
Demo Link:Source Code / Demo
Tags:Parallax gsap scrolling animation

#2 Parallax ScrollTrigger gsap animation

Parallax ScrollTrigger

Parallax ScrollTrigger gsap animation using HTML CSS and JavaScript, which was developed by Tom Miller. Moreover, you can customize it according to your wish and need.

Author:Tom Miller
Created on:June 4, 2020
Made with:HTML, CSS & JavaScript
Demo Link:Source Code / Demo
Tags:Parallax ScrollTrigger

#3 Parallax Cover Section

Parallax Cover Section

Parallax Cover Section animation using HTML and CSS which was developed by Envato Tuts+. Moreover, you can customize it according to your wish and need.

Author:Envato Tuts+
Created on:May 18, 2015
Made with:HTML & CSS
Demo Link:Source Code / Demo
Tags:Parallax Cover Section

Is parallax scrolling bad?

Yes, in some conditions Parallax scrolling is bad for your website because Parallax scrolling increases the load time of your website.

Is parallax scrolling good?

Yes, in some condition Parallax scrolling effect is good for your website because Parallax scrolling increases your audience retention.

Why is parallax scrolling important?

because, parallax effect increase audience retention and make website beautifu.l

What is parallax scrolling effect?

The parallax effect is a technique of background content moved at a different speed than the foreground content while scrolling.

If you want source code you can download it from the below button

We hope you liked this article. You should definitely keep your thoughts about it in the comment below and share this article with your friends.

Leave a Comment