便利なのが登場!スマホにもスクロール時に滑らかなアニメーションを適用できる超軽量スクリプト -lax.js

デスクトップでもスマホでもスクロールした際に、非常に滑らかで美しいアニメーションを簡単に実装できるシンプルで2Kbの超軽量JavaScriptを紹介します。

他のスクリプトへの依存は無く、ReactやVue.jsもサポートされています。

サイトのキャプチャ

lax.js -GitHub

lax.jsの特徴

lax.jsはVanilla Javascriptで書かれた2Kbの超軽量スクリプトです。
スクロールをトリガーにあらゆる要素にアニメーションが適用できます。

パフォーマンス面でも施策がとられており、デスクトップでもスマホでも非常に滑らかなアニメーションが実現できます。

lax.jsのデモ

デモでは実際のアニメーションを試すことができます。
デスクトップ・スマホ両方の環境でお試しください。

デモのキャプチャ

デモページ

lax.jsではパフォーマンスを向上させるためにアニメーション化する要素のリストにインデックスを付けます。Reactやvue.jsを使用している場合はwindow.onloadの後に要素を追加しているため、アニメーション化したいコンポーネントをDOMに追加するときには、lax.addElement(domElement)を呼び出す必要があります。

デモのキャプチャ

lax.js -React

デモのキャプチャ

lax.js -Vue.js

lax.jsの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

Step 2: JavaScript

スクリプトを初期化し、実行します。

Step 3: HTML

あとは、アニメーションさせたい要素にdata-lax-presetを加え、動作を指定します。

動作にはさまざまなキーワードが用意されており、さらにJavaScriptも使用できます。

sponsors

top of page

©2019 coliss