gsap,ScrollTrigger实现滚动条滚动时执行相应的动画

Mayer_123456

已于 2023-08-03 15:17:43 修改

阅读量1k

点赞数 2

文章标签： javascript css

于 2023-08-01 13:51:06 首次发布

本文链接：https://blog.csdn.net/weixin_44694230/article/details/132040373

版权

效果
描述：当滚动条滚动时，页面会随着滚动的滚动执行动画(vivo官网动画）

滚动条滚动动画

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入gsap和Scrolltrigger  js文件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>
    <title>手机滑动分散动画</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
 
    html {
        height: 5000px;
        /* 自适应 */
        font-size: 0.78125vw !important;
        overflow-x: hidden;
    }
 
    .screen {
        width: 100%;
        height: 100%;
    }
 
    .pink {
        width: 100%;
        height: 66.6667rem;
        background-color: pink;
    }
 
    .skyblue {
        width: 100%;
        height: 66.6667rem;
        background-color: skyblue;
        position: absolute;
    }
 
    .orange {
        width: 100%;
        height: 66.6667rem;
        background-color: orange;
    }
 
    .skyblue img {
        position: absolute;
    }
 
    .pic1 {
        width: 20.8333rem;
        height: 33.3333rem;
        left: 50%;
        top: 12.5rem;
        transform: translate(-50%);
    }
 
    .pic2 {
        width: 20.8333rem;
        height: 33.3333rem;
        left: 50%;
        top: 12.5rem;
        transform: translate(-50%);
    }
 
    .pic3 {
        width: 20.8333rem;
        height: 33.3333rem;
        right: 50%;
        transform: translateX(50%);
        top: 12.5rem;
    }
 
    .pic4 {
        width: 20.8333rem;
        height: 33.3333rem;
        left: 50%;
        top: 12.5rem;
        transform: translate(-50%);
    }
 
    .pic5 {
        width: 20.8333rem;
        height: 33.3333rem;
        right: 50%;
        transform: translateX(50%);
        top: 12.5rem;
    }
 
    .pic6 {
        width: 20.8333rem;
        height: 33.3333rem;
        left: 50%;
        top: 12.5rem;
        transform: translate(-50%);
    }
 
    .pic7 {
        width: 20.8333rem;
        height: 33.3333rem;
        position: absolute;
        right: 50%;
        transform: translateX(50%);
        top: 12.5rem;
    }
</style>
 
<body>
    <div class="screen">
        <!-- <div class="pink"></div> -->
        <div class="skyblue">
            <img class="pic1" style="z-index: 100;"
                src="./src/1-vivo-scroll-switch-phone-color/images/iqooneo7-color-img1-md.png" alt="">
            <img class="pic2" style="z-index: 90;"
                src="./src/1-vivo-scroll-switch-phone-color/images/iqooneo7-color-img2-md.png" alt="">
            <img class="pic3" style="z-index: 90;"
                src="./src/1-vivo-scroll-switch-phone-color/images/iqooneo7-color-img3-md.png" alt="">
            <img class="pic4" style="z-index: 80;"
                src="./src/1-vivo-scroll-switch-phone-color/images/iqooneo7-color-img1-md.png" alt="">
            <img class="pic5" style="z-index: 80;"
                src="./src/1-vivo-scroll-switch-phone-color/images/iqooneo7-color-img2-md.png" alt="">
            <img class="pic6" style="z-index: 70;"
                src="./src/1-vivo-scroll-switch-phone-color/images/iqooneo7-color-img3-md.png" alt="">
            <img class="pic7" style="z-index: 70;"
                src="./src/1-vivo-scroll-switch-phone-color/images/iqooneo7-color-img1-md.png" alt="">
        </div>
        <!-- <div class="orange"></div> -->
    </div>
</body>
<script>
    ScrollTrigger.create({
        trigger: '.skyblue', //skyblue元素
        start: 'top top', //.skyblue元素的顶部开始  
        end: '1600px',  // 到1600px结束
        markers: true, //开始标记  结束标记
        scrub: true,  // 关键点  和滚动条绑定
        pin: true,  //固定起始位置
        /**
         *  fromTo里第一个对象是开始的状态  第二个动画是你要执行的状态
         *  '<' 上一个动画开始，我也开始
         *  '>' 上一个动画结束，我在开始   默认
         *   1 一秒后执行  可以2也可以3....
         *  '+=1' 上一个动画结束后一秒我在执行   可以2也可以3....
         *  '-=1' 上一个动画结束前一秒我在执行    可以2也可以3....
        */
        animation: gsap.timeline()
            .fromTo('.pic1', { width: '20.8333rem', height: '33.3333rem' }, { width: '21.8333rem', height: '34.3333rem' }, '<')
            .fromTo('.pic2', { left: '50%'}, { left: '34%'}, '<')
            .fromTo('.pic3', { right: '50%' }, { right: '34%' }, '<')
            .fromTo('.pic4', { left: '50%' }, { left: '20%' }, '<')
            .fromTo('.pic5', { right: '50%' }, { right: '20%' }, '<')
            .fromTo('.pic6', { left: '50%' }, { left: '8%' }, '<')
            .fromTo('.pic7', { right: '50%' }, { right: '8%' }, '<')
    })
</script>
</html>