jquery动态效果插件之ScrollMagic

ScrollMagic 是一个强大的 JavaScript 库,可以帮助开发者在页面滚动时触发各种动画效果。它支持复杂的滚动交互,非常适合制作富交互的网页。
在这里插入图片描述
这里他使用了ScrollMagic的几种滚动效果:

视差滚动效果:页面上的一些元素在滚动时会产生视差滚动效果,即元素以不同的速度移动,营造出深度感。
元素淡入淡出效果:当页面元素滚动进入视口时,会有淡入淡出的动画效果。
元素缩放效果:某些元素在滚动时会有缩放动画。
元素位置变化效果:一些元素会随着滚动位置发生变化,如固定在页面顶部等。

demo:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {margin: 0;padding: 0;}.section {height: 100vh;display: flex;justify-content: center;align-items: center;font-size: 3rem;font-weight: bold;color: white;}.section-1 {background-color: #4CAF50;}.section-2 {background-color: #2196F3;}.section-3 {background-color: #E91E63;}.animated-element {width: 200px;height: 200px;background-color: white;border-radius: 50%;/* -100%就是从下往上 */transform: translateY(100%);box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);opacity: 0;}</style><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script><!--    处理 setTween is not function--><script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js"></script><script>// 创建 ScrollMagic 控制器$(document).ready(function () {// 创建 ScrollMagic 控制器var controller = new ScrollMagic.Controller();// 定义滚动动画场景var scene1 = new ScrollMagic.Scene({triggerElement: ".section-1",// 从不透明triggerHook: 0.5}).setTween(".section-1 .animated-element", {// transform: translate(100%, 0px);x: "100%",// 到透明opacity: 1,// 平滑自然的移动ease: Power2.easeOut}).addTo(controller);var scene2 = new ScrollMagic.Scene({triggerElement: ".section-2",triggerHook: 0.5}).setTween(".section-2 .animated-element", {y: "0",opacity: 1,ease: Power2.easeOut}).addTo(controller);var scene3 = new ScrollMagic.Scene({triggerElement: ".section-3",triggerHook: 0.5}).setTween(".section-3 .animated-element", {x: "100%",opacity: 1,ease: Power2.easeOut}).addTo(controller);})</script>
</head>
<body>
<div class="section section-1"><div class="animated-element"><h2>Section 1</h2></div>
</div>
<div class="section section-2" style="align-items: flex-start;"><div class="animated-element"><h2>Section 2</h2></div>
</div>
<div class="section section-3"><div class="animated-element"><h2>Section 3</h2></div>
</div></body>
</html>