scroll effects
Posted in
10126
3:08 am, September 4, 2021
Scroll Trigger Parallax Clouds Snow
Another example of smooth animations using GSAP and Scroll Trigger.
Good for scroll page animations.
I cant get this one working correctly in the demo code, you will need to check out the pen here.
Scroll Trigger Parallax Clouds Snow Demo
View Demo Full Screen View Demo New Tab
Scroll Trigger Parallax Clouds Snow Code
HTML
<!-- This is a recreation of Unfold's (https://dribbble.com/unfold) parallax scene: https://cdn.dribbble.com/users/14268/screenshots/3275340/northface.gif -->
<div class="scrollDist"></div>
<div class="main">
<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg">
<mask id="m">
<g class="cloud1">
<rect fill="#fff" width="100%" height="801" y="799" />
<image xlink:href="https://assets.codepen.io/721952/cloud1Mask.jpg" width="1200" height="800"/>
</g>
</mask>
<image class="sky" xlink:href="https://assets.codepen.io/721952/sky.jpg" width="1200" height="590" />
<image class="mountBg" xlink:href="https://assets.codepen.io/721952/mountBg.png" width="1200" height="800"/>
<image class="mountMg" xlink:href="https://assets.codepen.io/721952/mountMg.png" width="1200" height="800"/>
<image class="cloud2" xlink:href="https://assets.codepen.io/721952/cloud2.png" width="1200" height="800"/>
<image class="mountFg" xlink:href="https://assets.codepen.io/721952/mountFg.png" width="1200" height="800"/>
<image class="cloud1" xlink:href="https://assets.codepen.io/721952/cloud1.png" width="1200" height="800"/>
<image class="cloud3" xlink:href="https://assets.codepen.io/721952/cloud3.png" width="1200" height="800"/>
<text fill="#fff" x="350" y="200">EXPLORE</text>
<polyline class="arrow" fill="#fff" points="599,250 599,289 590,279 590,282 600,292 610,282 610,279 601,289 601,250" />
<g mask="url(#m)">
<rect fill="#fff" width="100%" height="100%" />
<text x="350" y="200" fill="#162a43">FURTHER</text>
</g>
<rect id="arrowBtn" width="100" height="100" opacity="0" x="550" y="220" style="cursor:pointer"/>
</svg>
</div>
CSS
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');
body, html {
width:100%;
height:100%;
background:#ddd;
font-family: 'Montserrat', sans-serif;
font-size:99px;
text-align:center;
}
div {
position:absolute;
}
Scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollTrigger.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollToPlugin3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
Javascript
gsap.set('.main', {position:'fixed', background:'#fff', width:'100%', maxWidth:'1200px', height:'100%', top:0, left:'50%', x:'-50%'})
gsap.set('.scrollDist', {width:'100%', height:'200%'})
gsap.timeline({scrollTrigger:{trigger:'.scrollDist', start:'top top', end:'bottom bottom', scrub:1}})
.fromTo('.sky', {y:0},{y:-200}, 0)
.fromTo('.cloud1', {y:100},{y:-800}, 0)
.fromTo('.cloud2', {y:-150},{y:-500}, 0)
.fromTo('.cloud3', {y:-50},{y:-650}, 0)
.fromTo('.mountBg', {y:-10},{y:-100}, 0)
.fromTo('.mountMg', {y:-30},{y:-250}, 0)
.fromTo('.mountFg', {y:-50},{y:-600}, 0)
$('#arrowBtn').on('mouseenter', (e)=>{ gsap.to('.arrow', {y:10, duration:0.8, ease:'back.inOut(3)', overwrite:'auto'}); })
$('#arrowBtn').on('mouseleave', (e)=>{ gsap.to('.arrow', {y:0, duration:0.5, ease:'power3.out', overwrite:'auto'}); })
$('#arrowBtn').on('click', (e)=>{ gsap.to(window, {scrollTo:innerHeight, duration:1.5, ease:'power1.inOut'}); }) // scrollTo requires the ScrollTo plugin (not to be confused w/ ScrollTrigger)
External Link for Scroll Trigger Parallax Clouds Snow
Add Comment
Other Items in scroll effects
Related Search Terms
Other Categories in Code
404 pages animation animations background effects boxes buttons css css & javascript css animation css animations css backgrounds css cursors css framework css frameworks css modal css positions css reset css shadows css slider css text effects css text formatting css tips css tools css z-index content slider cookie alerts design html css sections html canvas html sections icons image zoom interactive images lightbox link effects loading animation modals mouse effects navigation notifications parallax profiles quick css seo sections text ui web developer checklists animations backgrounds bootstrap buttons css css animated css animations css framework css grid footers forms html image effects images javascript scroll effects sections show your work svg text animation timeline
css animations
css animations
HTML Canvas
javascript