手軽よ。

ScrollMe – For simple scrolling effects

使い方

<div class="scrollme">
    <div
        class="animateme"
        data-when="enter"
        data-from="0.5"
        data-to="0"
        data-opacity="0"
        data-translatex="-200"
        data-rotatez="90"
    >
        Yup, that's all.
    </div>
</div>

親にscrollmeクラスを振って、子にclass="animateme"始め、data-から始まる属性値を持たせればOK。

See the Pen ScrollMe playpen by Nick Pearson (@nckprsn) on CodePen.

↑うまく動かないときは「RERUN」を押して。

jsを弄らなくてもフロント側であれこれ出来てまうので、完全に楽。

そのかわりおんなじコードでも繰り返し書く必要はあるけども、直感的で楽。

スクロール深度をトリガーに発火するタイプの処理ではなくて、あくまでスクロールに連動しているのがポイント。動きはCSSで制御しているのでかなりなめらかでスマホでもいい感じのパフォーマンスです。

ランディングページくらいならこいつでいい感じにスルッとアニメ付けられるね。