手軽よ。
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で制御しているのでかなりなめらかでスマホでもいい感じのパフォーマンスです。
ランディングページくらいならこいつでいい感じにスルッとアニメ付けられるね。
コメントを残す