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
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 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 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 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 |
Related Q&A About Parallax scrolling effect
Yes, in some conditions Parallax scrolling is bad for your website because Parallax scrolling increases the load time of your website.
Yes, in some condition Parallax scrolling effect is good for your website because Parallax scrolling increases your audience retention.
because, parallax effect increase audience retention and make website beautifu.l
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.