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>
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
Top comments (0)