スクロールに応じて要素にアニメーションエフェクトを付与できるシンプルで軽量なスクリプト・「lax.js」

Ads

lax.js


lax.jsはスクロールに応じて要素にアニメーションを付与させる軽量スクリプトです。圧縮版で2kbほど、非圧縮でも8kbほどで依存性もありません。基本的にはスクリプトを読み込んで初期化、カスタムデータ属性で設定するだけのシンプルな仕様です。

<p data-lax-preset="spin fadeInOut">foobar!</p>
<img src="huga.jpg" data-lax-translate-y="0 0, vh 200" />

こんな感じの書き方で後はCSSでスタイルする流れとなります。簡単に導入できて良いんじゃないでしょうか。ただし、しつこいようですが、明確な理由のない導入はいたずらと判断され逮捕されかねませんので注意して検討する事をお薦めします(冗談ではなく)。ライセンスはMIT。

lax.js