ScrollMagic帧动画Demo

moon son

已于 2022-01-26 11:15:19 修改

阅读量968

点赞数

文章标签：动画 css css3

于 2022-01-25 17:06:32 首次发布

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

版权

用的图片是top-down排列的精灵长图

<!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>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        header{
            width: 100%;
            height: 100px;
            background: #000;
        }
        div{
            width: 100%;
            height: 100vh;
        }
        .section1{
            background: red;
            position: relative;
            overflow: hidden;
        }
        .anim{
            width: 1350px;
            height: 1080px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background-color: yellow;
        }
        .section2{
            background: green;
        }
        .section3{
            background: blue;
        }
        .section4{
            background: deeppink;
        }
        footer{
            width: 100%;
            height: 2000px;
            background: #000;
        }
        .frame {
          width: 1350px;
          height: 1080px;
          background-image: url(../imgs/technology/pc-TEC-iGMP.jpg);
          background-repeat: no-repeat;
          background-position: 50% 0;
        }
        .frame1 {
          background-position: 50% -1080px;
        }
        
        .frame2 {
          background-position: 50% -2160px;
        }
        
        .frame3 {
          background-position: 50% -3240px;
        }
        
        .frame4 {
          background-position: 50% -4320px;
        }
        
        .frame5 {
          background-position: 50% -5400px;
        }
        
        .frame6 {
          background-position: 50% -6480px;
        }
        
        .frame7 {
          background-position: 50% -7560px;
        }
        
        .frame8 {
          background-position: 50% -8640px;
        }
        
        .frame9 {
          background-position: 50% -9720px;
        }
    </style>
</head>
<body>
    <header></header>
    <div class="section1 js-scrollpin">
        <div class="anim">
          <div class="frame"></div>
        </div>
    </div>
    <div class="section2"></div>
    <div class="section3"></div>
    <div class="section4"></div>
    <footer></footer>
    <script>
        var frame = document.querySelector('.frame'),
            frame_count = 9,  // 帧数
            offset = 200;     // 每次滚动的距离
        var controller = new ScrollMagic.Controller({
          globalSceneOptions: {   // 选项将传递给使用 addScene 方法添加到控制器的每个场景
            triggerHook: 0  // 相对视口的位置
          }
        });
        new ScrollMagic.Scene({
          triggerHook: 0,
          triggerElement: '.js-scrollpin',
          duration: (frame_count * offset) + 'px',  //持续时间
          reverse: true   // 向上滚动场景是否反转
        })
        .setPin('.js-scrollpin')
        .addTo(controller);
        for (var i = 1, l = frame_count; i <= l; i++) {
          new ScrollMagic.Scene({
              triggerElement: '.js-scrollpin',
              offset: i * offset    // 场景触发位置
            })
            .setClassToggle(frame, 'frame' + i)   // 当场景触发时，类将被添加到提供的元素
            .addTo(controller)
        }
    </script>
</body>
</html>

moon son

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ScrollMagic帧动画Demo

用的图片是top-down排列的精灵长图<!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.
复制链接

扫一扫