滚动条动画制作

安装ScrollMagic

ScrollMagic官网

npm install scrollmagic
npm install gsap //动画库

import ScrollMagic from 'scrollmagic';
import { gsap,TimelineLite, TweenLite } from 'gsap';

使用

gsap.registerPlugin(TimelineLite, TweenLite); //注册动画库 主要用于效果过度
let controller = new ScrollMagic.Controller(); //创建控制器
let one = new TimelineLite(); //使用时间线动画


//绑定关键帧
one.add(TweenLite.to(document.getElementById("hi_us"), 1, { opacity: 0 }));
one.add(TweenLite.to(document.getElementById("hi_cn"), 1, { opacity: 1 }));
one.add(TweenLite.to(document.getElementById("hi_cn"), 1, { opacity: 0 }));
one.add(TweenLite.to(document.getElementById("hi_jp"), 1, { opacity: 1 }));
one.add(TweenLite.to(document.getElementById("hi_jp"), 1, { opacity: 0 }));
one.add(TweenLite.to(document.getElementById("hi_kr"), 1, { opacity: 1 }));
one.add(TweenLite.to(document.getElementById("hi_kr"), 1, { opacity: 0 }));
one.add(TweenLite.to(document.getElementById("hi_ru"), 1, { opacity: 1 }));

one.pause(); //暂停动画防止自动播放

//创建场景并添加到控制器
new ScrollMagic.Scene({
    duration: window.innerHeight * 2.5, //播放一帧需要的距离
    triggerHook: 0, //触发距离
    triggerElement: "#one" //场景id 
}).setPin("#one").addTo(controller).on("progress", (e: any) => {
    //动画执行进度
    one.seek(e.progress * 8) //8来源于关键帧动画
}).on("end",() => {
    //动画结束触发
    if(Boolean(props.location.search)){
        let url = props.location.search.replace("?url=","")
        window.location.href = url;
    }
})

/*------------HTML部分------------*/
<div>
    <div className="main" id="one" style={{ height: '100vh' }}> 
        <div id="controller1" className="scene">
            <p id="hi_us" style={{ fontSize: "270px" }}>Hi</p>
            <p id="hi_cn" style={{ opacity: 0, fontSize: "180px" }}>你好</p>
            <p id="hi_jp" style={{ opacity: 0 }}>こんにちは</p>
            <p id="hi_kr" style={{ opacity: 0 }}>안녕하세요</p>
            <p id="hi_ru" style={{ opacity: 0 }}>Здравствыйте</p>
        </div>
    </div>

    <div className="square">
        <p>My</p>
        <p>WebSite</p>
        <p style={{textAlign:"justify"}}>WeiBin.Chen</p>
    </div>
</div>

演示界面

DEMO