ScrollMagic结合TweenMax的Demo

最新推荐文章于 2024-05-21 12:15:16 发布

moon son

最新推荐文章于 2024-05-21 12:15:16 发布

阅读量703

点赞数

文章标签： css html css3 animation

本文链接：https://blog.csdn.net/HYEHYEHYE/article/details/121293164

版权

ScrollMagic是一款可以把滚动条当进度条用的jquery插件，官网

GSAP的全称是GreenSock Animation Platform（格林斯托克动画平台），中文官网

ScrollMagic + GSAP的组合可以制作炫酷动画，而TweenMax是GSAP中功能最全的一个库，我们这里就直接引入TweenMax.js做个简单的演示，ScrollMagic中使用GSAP还需要引入相应的插件animation.gsap.js


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ScrollMagic-GSAP</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"> </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        header{
            width: 100%;
            height: 100px;
            background: #000;
        }
        div{
            width: 100%;
            height: 200px;
        }
        .section1{
            background: red;
        }
        .anim{
            width: 100px;
            background-color: yellow;
        }
        .section2{
            background: green;
        }
        .section3{
            background: blue;
        }
        .section4{
            background: deeppink;
        }
        footer{
            width: 100%;
            height: 2000px;
            background: #000;
        }
    </style>
</head>
<body>
    <header></header>
    <div class="section1">
        <div class="anim"></div>
    </div>
    <div class="section2"></div>
    <div class="section3"></div>
    <div class="section4"></div>
    <footer></footer>
    <script>
        // 1.创建一个控制器对象controller
        let controller = new ScrollMagic.Controller();
        // 2.创建一个场景对象scene
        let scene = new ScrollMagic.Scene({
            offset: 100,
            duration: 200,
        });
        // 告诉ScrollMagic哪一个元素需要固定
        scene.setPin(".section1");
        /*
        // 创建一个GSAP动画
        let tm = TweenMax.to(".anim", 3, {
            width: '100%',
            height: 200
        });
        scene.setTween(tm);
        */
        //场景条件满足后，这个动画就可以执行了。给anim 添加动画，动画效果会随着滚动条的滚动而逐渐变化
        scene.setTween(".anim", 3, {
            width: '100%',
            height: 200
        });
        // 3.将场景对象添加到控制器对象
        controller.addScene(scene);
    </script>
</body>
</html>

moon son

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ScrollMagic结合TweenMax的Demo

ScrollMagic是一款可以把滚动条当进度条用的jquery插件，ScrollMagic + GSAP的组合可以制作炫酷动画，TweenMax是GSAP中功能最全的一个库<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ScrollMagic-GSAP</title> <script src="https
复制链接

扫一扫