スクロールに応じてCSS keyframesライクな書き方でアニメーションを付与できる・「Motus」

Motus

Motusはスクロールに応じて任意の要素にアニメーションを付与する為のライブラリです。非依存なので単体で使えます。アニメーションはCSS keyframesライクな書き方ができますのでCSSの知識がある方なら扱いやすいと思います。

const customStartPointAnimation = new Motus.Animation(
    new Motus.Point(document.getElementById('start-point')), 
    new Motus.Point(document.getElementById('end-point')),
    document.getElementById('cube-startend'), 
    {
        50: {
            width: '200px',
            marginLeft: '100px',
        },
        100: {
            width: '100px',
            marginLeft: '200px'
        }
    }
);
Motus.addAnimation(customStartPointAnimation);

指定した開始ポイントにスクロールが達したら設定したアニメーションが起動します。複雑なアニメーションも割と手軽に実装出来そうです。ライセンスはMIT。

Motus

Motus

Resources & Tools

OSS

AI

CSS snippet

JavaScript snippet

WordPress Code