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>