GSAPdemo

B站弹幕

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <video width="100%" height="100%" src="https://www.w3school.com.cn/i/movie.ogg"></video>
    <div class="container">
        
        <span class="bullet">模拟增加字幕模拟增加字幕模拟增加字幕模拟增加字幕模拟增加字幕模拟增加字幕模拟增加字幕模拟增加字幕</span>
    </div>
    <style>
        .container{
            width: 100%;
            height: 100%;
            position: absolute;
            overflow: hidden;
            /* background-color: black; */
            -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKIHdpZHRoPSI2MjcuMDI1cHgiIGhlaWdodD0iMzU1cHgiIHZpZXdCb3g9IjAgMCAzMjAuMDAwMDAwIDE4MC4wMDAwMDAiCiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0Ij4KPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsMTgwLjAwMDAwMCkgc2NhbGUoMC4xMDAwMDAsLTAuMTAwMDAwKSIKZmlsbD0iIzAwMDAwMCIgc3Ryb2tlPSJub25lIj4KPHBhdGggZD0iTTAgOTA1IGwwIC04OTUgNjMwIDAgNjMwIDAgMCA3OCBjMCA2MyA3IDk1IDM1IDE3NyAyMCA1NSA0MCAxMzIgNDUgMTcxIDUgNDAKMjMgMTIxIDQwIDE4MCA0MCAxNDQgMzkgMTU2IC05IDE5NSAtNDEgMzMgLTUyIDUzIC03MCAxMzIgLTkgMzYgLTkgNTkgMCA5MCA3CjIzIDE1IDgyIDE4IDEzMiA2IDg3IDcgOTAgMzQgOTkgMjAgNyAzNyA2IDYwIC0zIDE4IC03IDU1IC0xNyA4MiAtMjAgNjIgLTkKOTIgLTI0IDEwMSAtNTMgMzIgLTEwNSA0NiAtMTI4IDkyIC0xNTUgMjYgLTE0IDcwIC00MSA5NyAtNjAgNjUgLTQzIDE4NyAtOTMKMjQ1IC05OSA3NyAtOSA4NiAtMTMgOTggLTM5IDE0IC0zMCAxNiAtMTA0IDMgLTEyNCAtMTEgLTE4IC0xMDQgLTMyIC0xNTUgLTI0Ci0yMiAzIC01NCAxNCAtNzEgMjQgLTQwIDIzIC05MSAzMyAtMTAwIDE5IC0zIC01IC0xMSAtNyAtMTcgLTQgLTEzIDggLTEgLTUxCjE5IC05MCAxMSAtMjEgMTUgLTY3IDE1IC0xODAgMSAtMTAzIDUgLTE2NCAxNSAtMTkxIDE3IC00NyAxOSAtMTY2IDMgLTE5NCAtNQotMTEgLTEwIC0yOSAtMTAgLTQwIGwwIC0yMSA2ODUgMCA2ODUgMCAwIDg5NSAwIDg5NSAtMTYwMCAwIC0xNjAwIDAgMCAtODk1eiIvPgo8L2c+Cjwvc3ZnPgo=");
            -webkit-mask-size: 100% 100%;
            top: 0;
        }
        .bullet{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%); 
            color: #dd0000;
            font-size: 20px;
            font-weight: bold;
            animation: move 1s infinite alternate;
        }
        @keyframes move {
            0%{
                transform: translate(-50%,-50%); 
            }
            100%{
                transform: translate(-50%,-50%) translateX(100px); 
            }
        }
    </style>
</body>
</html>

苹果官网抹除效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GSAP</title>
</head>

<body style="overflow-x: hidden;">
    <div class="ani-container">
        <div class="box">
            <svg id="layer-1" class="mysvg" xmlns="http://www.w3.org/2000/svg" >
                <path class="line" d="M779.4,65.5c-194-9-503,52-503,83s387-53,387-10s-523,31-523,101c0,53,784-128,784-54
                    c0,59-937.4,72.7-937.4,141.3c0,45.7,1011.4-124.3,1011.4-75.3s-1029,83-1029,140s1159-162.7,1078-83c-66,65-1100,90-1091,139
                    c8.7,47.5,1091-121,1091-53s-1068,21-1068,110c0,57,919-27,1074-33" fill="none" stroke-width="300"></path>
            </svg>
            <div class="bg">
                <img style="object-fit: cover;" width="100%" height="100%" src="./img.jpeg" alt="" srcset="">
            </div>
        </div>
    </div>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/gsap/3.9.1/gsap.min.js"
        type="application/javascript"></script>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/gsap/3.9.1/ScrollTrigger.min.js"
        type="application/javascript"></script>
    <script>
        gsap.registerPlugin(ScrollTrigger)
        let tl = gsap.timeline()
        
        // 通过fromTo和修改strokeDashoffset让.line长度随着滚动条的滚动而变化
        gsap.fromTo(".line", {
            strokeDashoffset: ()=>{
                // .line的实际长度
                return document.querySelector('.line').getTotalLength() + 1
            },
            strokeDasharray: ()=>{
                // .line的实际长度
                return document.querySelector('.line').getTotalLength() + 1
            },
        }, {
            strokeDashoffset: 0,
            strokeDasharray: ()=>{
                // .line的实际长度
                return document.querySelector('.line').getTotalLength() + 1
            },
            duration: 2,
            ease: "none",
            opacity: 1,
            scrollTrigger: {
                trigger: '.box',
                scrub: 0,
                markers: true,
                start: "top 60%", // 当元素顶部进入视窗底部时开始
                end: "bottom 40%",   // 当元素底部离开视窗顶部时结束
                toggleActions: "restart none none none", // 定义进入/离开视窗时的动作
                onLeave: () => {
                    // 当元素完全离开视口时
                    // gsap.set(".green", { position: 'absolute', top: 'auto' });
                },
                onEnterBack: () => {
                    // 当元素再次进入视口时（从上方）
                }
            }
        });
        
    </script>
    <style>
         body {
            display: flex;
            align-items: center;
            justify-content: space-around;
            height: 300vh;
            margin: 0;
        }
        .ani-container {
            /* position: fixed; */
            width: 600px;
            height: 600px;
            border: 1px solid black;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .box {
            width: 600px;
            height: 600px;
            position: relative;

        }
        .bg{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            
        }
        .mysvg{
            width: 100%;
            height: 100%;
            z-index: 3;
            position: absolute;
            background-color: #FFF;
            mix-blend-mode: lighten;
        }
        .line{
            stroke: #000;
            stroke-width: 80;
            stroke-linecap: round; 
            left: -50%;
        }
    </style>
</body>

</html>

ScrollTrigger(苹果官网滚动条联动,圆形进度条)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GSAP</title>
</head>

<body style="overflow-x: hidden;">
    <div class="ani-container">
        <div class="box">
            <svg class="mysvg" width="300" height="300">
                <circle class="line" fill="none" cx="50%" cy="50%" r="50%" color="red"></circle>
            </svg>
        </div>
    </div>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/gsap/3.9.1/gsap.min.js"
        type="application/javascript"></script>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/gsap/3.9.1/ScrollTrigger.min.js"
        type="application/javascript"></script>
    <script>
        gsap.registerPlugin(ScrollTrigger)
        let tl = gsap.timeline()
        
        // 通过fromTo和修改strokeDashoffset让.line长度随着滚动条的滚动而变化
        gsap.fromTo(".line", {
            strokeDashoffset: ()=>{
                // .line的实际长度
                return document.querySelector('.line').getTotalLength() + 1
            },
            strokeDasharray: ()=>{
                // .line的实际长度
                return document.querySelector('.line').getTotalLength() + 1
            },
        }, {
            strokeDashoffset: 0,
            strokeDasharray: ()=>{
                // .line的实际长度
                return document.querySelector('.line').getTotalLength() + 1
            },
            duration: 2,
            // ease: "none",
            opacity: 1,
            scrollTrigger: {
                trigger: '.box',
                scrub: 2, // 动画的缓冲时间
                markers: false,
                start: "top 60%", // 当元素顶部进入视窗底部时开始
                end: "bottom 50%",   // 当元素底部离开视窗顶部时结束
                toggleActions: "restart none none none", // 定义进入/离开视窗时的动作
                onLeave: () => {
                    // 当元素完全离开视口时
                    // gsap.set(".green", { position: 'absolute', top: 'auto' });
                },
                onEnterBack: () => {
                    // 当元素再次进入视口时（从上方）
                }
            }
        });
        

    </script>
    <style>
        body {
            display: flex;
            align-items: center;
            justify-content: space-around;
            min-height: 300vh;
            margin: 0;
        }
        .ani-container {
            /* position: fixed; */
            width: 100vw;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .box {
            display: block;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.5rem;
            top: 50%;
            left: 50%;
        }
        .mysvg{
            overflow: visible;
        }
        .line{
            stroke: #ffc0e0;
            stroke-width: 30;
            stroke-linecap: round;
        }
        
    
    </style>
</body>

</html>

视差动画Demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视差</title>
</head>
<body>
<!--  引入gsap  -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<!--  引入ScrollTrigger  -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>


<section class="section-1">
    <p class="title">巴拉巴拉小魔仙</p>
</section>
<section class="section-2">
    <p class="title">巴拉巴拉小魔仙</p>
</section>
<section class="section-3">
    <p class="title">巴拉巴拉小魔仙</p>
</section>


<style>
    body,html,section{
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
    }
    section{
        position: relative;
        overflow: hidden;
    }
    .section-1{
        background-image: url(./img/1.JPG);
        background-size: cover;
        background-repeat: no-repeat;
    }
    .section-2{
        background-image: url(./img/2.JPG);
        background-size: cover;
        background-repeat: no-repeat;
    }
    .section-3{
        background-image: url(./img/3.JPG);
        background-size: cover;
        background-repeat: no-repeat;
    }
    .title{
        font-size: 60px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        
    }
</style>

<script>
    gsap.registerPlugin(ScrollTrigger);
    const sections = document.querySelectorAll('section');
    sections.forEach(section => {
        gsap.fromTo(section, {
            backgroundPositionY: `-${window.innerHeight / 2}px`,
        }, {
            backgroundPositionY: `${window.innerHeight / 2}px`,
            duration: 3,
            ease: 'none',
            scrollTrigger: {
                trigger: section,
                scrub: true, // 解除时间绑定和滚动条绑定
            }
        })
    })
</script>


</body>
</html>