Skip to content

Instantly share code, notes, and snippets.

@royce002

royce002/GSAP Full Screen Scrolliing

Last active April 27, 2023 14:04
Show Gist options
  • Save royce002/c4fcc5a8494ce64c0fe7d91a56abf46f to your computer and use it in GitHub Desktop.
Save royce002/c4fcc5a8494ce64c0fe7d91a56abf46f to your computer and use it in GitHub Desktop.
Download ZIP
Parallax GSAP Scroll Trigger
Raw
GSAP Full Screen Scrolliing
<body>
<nav>
<img src="https://bit.ly/2NKLFXr" alt="">
<div>
<ul id="ul-menu">
<li><a id="menu_link" href="#section_beaches">Beaches</a></li>
<li><a id="menu_link" href="#section_temples">Civlization</a></li>
<li><a id="menu_link" href="#section_places">Places</a></li>
</ul>
</div>
</nav>
<section class="container" id="section_beaches">
<div class="parallax parallax1">
<div id="div-span1">
<span>A</span><span>m</span>
<span>a</span><span>z</span>
<span>i</span><span>n</span>
<span>g</span><span>&nbsp</span>
<span>b</span><span>e</span>
<span>a</span><span>c</span>
<span>h</span><span>e</span>
<span>s</span>
</div>
</div>
</div>
</section>
<section class="container" id="section_temples">
<div class="parallax parallax2">
<div id="div-span2">
<span>R</span><span>i</span>
<span>c</span><span>h</span>
<span>&nbsp</span><span>a</span>
<span>n</span><span>c</span>
<span>i</span><span>e</span>
<span>n</span><span>t</span>
<span>&nbsp</span><span>c</span>
<span>i</span><span>v</span>
<span>i</span><span>l</span>
<span>i</span><span>z</span>
<span>a</span><span>t</span>
<span>i</span><span>o</span>
<span>n</span>
</div>
</div>
</section>
<section class="container" id="section_places">
<div class="parallax parallax3">
<div id="div-span3">
<span>W</span><span>o</span>
<span>n</span><span>d</span>
<span>e</span><span>r</span>
<span>f</span><span>u</span>
<span>l</span><span>&nbsp</span>
<span>p</span><span>l</span>
<span>a</span><span>c</span>
<span>e</span><span>s</span>
<span>&nbsp</span><span>t</span>
<span>o</span><span>&nbsp</span>
<span>g</span><span>o</span>
</div>
</div>
</section>
</body>
<!-- <div class="line"></div>
<header>
<a href="https://greensock.com/scrolltrigger">
<img class="greensock-icon" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/scroll-trigger-logo-light.svg" width="200" height="64" />
</a>
</header> -->
Raw
script.js
gsap.registerPlugin(ScrollTrigger);
const containers = document.querySelectorAll(".container");
const spans1 = document.querySelectorAll("#div-span1 span");
const spans2 = document.querySelectorAll("#div-span2 span");
const spans3 = document.querySelectorAll("#div-span3 span");
gsap.to(spans1, {
scrollTrigger: {
trigger: containers[0],
start: "top center",
toggleActions: "restart none none none"
// pin:true,
// markers: true
},
opacity: 1,
stagger: 0.1,
duration: 0.2
});
gsap.to(spans2, {
scrollTrigger: {
trigger: containers[1],
start: "top center",
toggleActions: "restart none none none"
// pin:true
},
opacity: 1,
stagger: 0.1,
duration: 0.2
});
gsap.to(spans3, {
scrollTrigger: {
trigger: containers[2],
start: "top center",
toggleActions: "restart none none none"
// pin:true
},
opacity: 1,
stagger: 0.1,
duration: 0.2
});
// let body = document.getElementsByTagName("body");
// var html = document.getElementsByTagName("html")[0];
// window.addEventListener("resize", () => {
// if (window.innerWidth > 500) {
// menu_list.style.display = "block";
// isVisible = true;
// } else {
// menu_list.style.display = "none";
// isVisible = false;
// }
// });
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/ScrollTrigger.min.js"></script>
Raw
style.css
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
body,
html {
height: 100%;
margin: 0;
overflow-x: hidden;
scroll-behavior: smooth;
font-family: "Montserrat", sans-serif;
}
nav {
display: flex;
justify-content: space-between;
background-color: whitesmoke;
box-shadow: 0px 3px 5px gray;
position: sticky;
top: 0;
left: 0;
width: 100%;
height: 50px;
z-index: 2;
}
nav img {
margin: 5px 0 5px 5px;
width: 100px;
height: 100px;
/* line-height: 15px; */
border-radius: 50%;
z-index: 1;
}
nav div {
display: flex;
justify-content: space-around;
}
nav ul {
list-style: none;
margin: 15px 5px 15px 5px;
border-radius: 5px;
}
ul li {
float: left;
margin: 0 20px 0 20px;
}
li a {
text-decoration: none;
color: black;
font-size: larger;
}
#menu {
display: none;
width: 30px;
margin: 15px 5px 15px 5px;
cursor: pointer;
}
#menu div {
background-color: black;
height: 5px;
width: 30px;
margin: 5px 0;
}
.container {
position: relative;
top: 0;
height: 100vh;
width: 100%;
margin: 0;
z-index: 1;
text-align: center;
}
.title {
position: absolute;
width: 100%;
text-align: center;
z-index: 1;
color: black;
top: 30px;
max-width: 100%;
}
.parallax {
position: relative;
/* Full height */
height: 100%;
margin: 0;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
max-height: 100%;
width: 100%;
/* opacity: 0.5; */
}
.parallax1 {
/* The image used */
background-image: url("http://oneworld.com.lb/cms/wp-content/uploads/2014/12/Holiday-In-Sharm-El-Sheikh-beach.jpg");
max-height: 100%;
width: 100%;
}
.parallax2 {
/* The image used */
background-image: url("http://kjncairosummer.files.wordpress.com/2011/08/middlecoffinleftviewwallpaper1.jpg");
max-height: 100%;
width: 100%;
}
.parallax3 {
/* The image used */
background-image: url("https://live.staticflickr.com/4140/4794905061_c61e2f66ec_b.jpg");
max-height: 100%;
width: 100;
}
#div-span1,
#div-span2,
#div-span3 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
margin: auto;
}
.parallax span {
font-family: "Montserrat", sans-serif;
font-size: 60px;
font-weight: bold;
color: white;
opacity: 0.2;
}
img {
width: 500px;
margin: 0 5% 0 5%;
height: 300px;
border-radius: 5px;
box-shadow: 4px 4px 4px gray;
}
@media screen and (max-width: 550px) and (min-height: 550px) {
#menu {
display: block;
margin: 5px 10px 5px 5px;
}
ul {
display: none;
position: absolute;
top: 40px;
right: 5px;
background-color: whitesmoke;
padding: 5px;
height: auto;
}
ul li {
float: none;
margin: 10px 0 10px 0;
background-color: whitesmoke;
text-align: center;
}
.images-div {
display: block;
height: auto;
text-align: center;
top: 60px;
}
.images-div h2,
h3 {
text-align: left;
}
img {
width: 80%;
height: 100px;
}
nav img {
width: 80px;
height: 80px;
}
}
Raw
styles
<link href="https://codepen.io/GreenSock/pen/7ba936b34824fefdccfe2c6d9f0b740b" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment