Created
August 26, 2021 10:00
-
-
Save cassc/c5c534ef31d7f63b6414bee1c918ea5d to your computer and use it in GitHub Desktop.
ScrollMagic and GreenSock for parallax scroll animation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="holder hd1"> | |
| <div class="object o1 "></div> | |
| </div> | |
| <div class="holder hd2"> | |
| <div class="object o2 "></div> | |
| </div> | |
| <div class="holder hd3"> | |
| <div class="object o3 "></div> | |
| </div> | |
| </div> | |
| </body> | |
| <style> | |
| .holder{ | |
| width: 90vw; | |
| height: 400px; | |
| background-color: lightgrey; | |
| margin-bottom: 100px; | |
| position: relative; | |
| display:flex; | |
| flex-direction:column; | |
| border-radius: 1rem; | |
| justify-content: center; | |
| position: relative; | |
| } | |
| .object{ | |
| position: absolute; | |
| left: 2rem; | |
| width: 30vw; | |
| height: 380px; | |
| background-color: blue; | |
| border-radius: 0.4rem; | |
| background-image: url('sample.webp'); | |
| background-position: center; | |
| } | |
| .o1{ | |
| bottom: 0px; | |
| } | |
| .o2{ | |
| bottom: -80px; | |
| } | |
| .o3{ | |
| bottom: -20px; | |
| } | |
| .container { | |
| padding: 4rem; | |
| width: 100%; | |
| display:flex; | |
| flex-direction: column; | |
| align-items:center; | |
| } | |
| body { | |
| margin-top: 20vh; | |
| padding: 0; | |
| margin: 0; | |
| padding: 0; | |
| margin: 0; | |
| min-height: 580vh; | |
| } | |
| </style> | |
| <script> | |
| var controller = new ScrollMagic.Controller(); | |
| function setAnimation(holder, object, triggerHook, yoffset, duration){ | |
| // triggerHook value: | |
| /* https://scrollmagic.io/docs/ScrollMagic.Scene.html#constructor */ | |
| /* "onEnter" => 1 | |
| * "onCenter" => 0.5 | |
| * "onLeave" => 0 */ | |
| // duration: "100%": full window scroll height, or use number for exact number of pixels scroll | |
| var tl = new TimelineMax(); | |
| tl.to(object, 1, { y: yoffset, ease: Linear.easeNone }); | |
| var scene = new ScrollMagic.Scene({ | |
| triggerElement: holder, | |
| triggerHook: triggerHook, | |
| duration: duration}) | |
| .setTween(tl) | |
| .addTo(controller); | |
| } | |
| setAnimation('.hd1', '.o1', 0.1, -80, "100%") | |
| setAnimation('.hd2', '.o2', 0.85, -160, "100%") | |
| setAnimation('.hd3', '.o3', 0.9, -30, 30) | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment