jquery动态效果插件之ScrollMagic

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

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

demo:
在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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>
	
	<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 1h2>
    div>
div>
<div class="section section-2" style="align-items: flex-start;">
    <div class="animated-element">
        <h2>Section 2h2>
    div>
div>
<div class="section section-3">
    <div class="animated-element">
        <h2>Section 3h2>
    div>
div>

body>
html>

相关阅读:
spring cloud sream 统一集成mq中间件
【Shell篇＜Ⅲ＞】——shell函数、字符串的处理
浅谈能源汽车下乡充电桩建设优化建议及解决方案
Stable Diffusion 模型分享：PicX_real（真实照片）
这18个网站能让你的页面背景炫酷起来
面试系列Redis：缓存穿透、击穿、雪崩的解决方案
Spring cloud负载均衡@LoadBalanced & LoadBalancerClient
记一次 .NET 某数控机床控制程序卡死分析
micropython实现mpy的ota（有用，推荐）
金仓数据库KingbaseES数据库参考手册(服务器配置参数13. 锁管理)

原文地址：https://blog.csdn.net/qq_45832807/article/details/139746508