使用CSS新特性scroll-time模仿scrollmagic首页效果

最近解到了css新特性的【scroll-timeline】，效果很有意思，分享分享学习成果

ScrollMagic ♥ Demo
这个效果主要分为3个动画： 1、帽子 2、魔术棒 3、文字

页面布局

    <div class="container">
        <!-- 文字 -->
        <span class="text">
            <span style="--i: 1;">S</span>
            <span style="--i: 2;">c</span>
            <span style="--i: 3;">r</span>
            <span style="--i: 4;">o</span>
            <span style="--i: 5;">l</span>
            <span style="--i: 6;">l</span>
            <span style="--i: 7;">M</span>
            <span style="--i: 8;">a</span>
            <span style="--i: 9;">g</span>
            <span style="--i: 10;">i</span>
            <span style="--i: 11;">c</span>
        </span>
        <!-- 帽子 -->
        <img class="hat" src="https://scrollmagic.io/assets/img/demo_tophat.png" alt="">
        <!-- 棍子 -->
        <img class="wand" src="https://scrollmagic.io/assets/img/demo_wand.png" alt="">
        <!-- 滚动的幕布 -->
        <div id="stretcher"></div>
    </div>

滚动动画驱动的前置条件

    *{
        padding: 0;
        margin: 0;
        user-select: none;
    }
    
    #stretcher {
      height: calc(2 * 100vh);
    }

    ::-webkit-scrollbar {
        display: none;
    }

    .container {
        position: relative;
        background-image: radial-gradient(#81bcff, #303391);
        height: 100vh;
        overflow-y: scroll;
        scroll-timeline: --homeTimeline y;
        color: #fff;
    }

帽子

    .hat {
        position: fixed;
        top: 220px;
        z-index: 2;
        left: calc(50% - 144px);
        /* animation: shake var(--time) linear infinite; */
        animation-name: hat;
        animation-fill-mode: forwards;
        animation-timeline: --homeTimeline;
    }
    
    @keyframes hat {
        5%,40%{
        z-index: 2;
            top: 220px;
            transform: rotate(0deg);
        }
        
        45% {
            z-index: 1;
            top: 80px;
            transform: rotate(-10deg);
        }
        50% ,100%{
            top: -250px;
        }
    }

魔术棒

    .wand {
        position: absolute;
        z-index: 3;
        animation: wand;
        animation-timeline: --homeTimeline;
    }
    
    @keyframes wand {
        0% {
            right: calc(50% - 340px);
            top: -100px;
            transform: matrix(0.93969, 0.34202, -0.34202, 0.93969, 0, 0);
        }
        40% {
            right: calc(50% - 340px);
            top: 670px;
            transform: matrix3d(0.986621, -0.16303, 0, 0, 0.16303, 0.986621, 0, 0, 0, 0,1, 0, 0, 0, 0, 1)
        }
        80%,100%{
            right: calc(50% - 340px);
            top: -100px;
            transform: matrix(1,0,0,1,0,0);
        }
    }

文字

    .text {
        font-size: 125px;
        font-weight: bold;
        display: flex;
        position: fixed;
        width: 100%;
        z-index: 2;
        justify-content: center;
        text-align: center;
        top: 360px;
        font-family: 'Roboto Condensed', sans-serif;
        justify-content: center;
        animation-name: txt;
        animation-timeline: --homeTimeline;
    }

    .text span {
        animation: red .24s linear calc(var(--i) * 0.15s);
        animation-timeline: --homeTimeline;
    }
    
        @keyframes red {
        0% ,50%{
            color: #fff;
            transform: scale(1);
        }
        70%{
            color: #ff455f;
            transform: scale(2.4);
        }
        95% {
            color: #fff;
            transform: scale(1);
        }
    }
    
    
    @keyframes txt {
        0%,40%{
            transform: scale(.2);
        }
        50% ,100%{
            transform: scale(1);
        }
    }