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

サイト構築 -JavaScript

Post on:2019年3月20日

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: 外部ファイル

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

<html>
<head>
  ...
  <script src="lib/lax.min.js" >
</head>
<body>
  ...
  コンテンツ
  ...
</body>
</html>

<html>

<head>

...

</head>

<body>

...

コンテンツ

...

</body>

</html>

Step 2: JavaScript

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

<html>
<head>
  ...
<script src="lib/lax.min.js" >
<script type="text/javascript">
window.onload = function() {
	lax.setup() // init
	  
	document.addEventListener('scroll', function(e) {
	  lax.update(window.scrollY) // update every scroll
	}, false)
}
</script>
</head>
<body>
  ...
  コンテンツ
  ...
</body>
</html>

<html>

<head>

...

window.onload = function() {

lax.setup() // init

document.addEventListener('scroll', function(e) {

lax.update(window.scrollY) // update every scroll

}, false)

}

</script>

</head>

<body>

...

コンテンツ

...

</body>

</html>

Step 3: HTML

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

<p data-lax-preset="spin fadeInOut">Look at me goooooo!</p>

1	<p data-lax-preset="spin fadeInOut">Look at me goooooo!</p>

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

<p data-lax-opacity="0 1, vh 0">
  vh = window.innerHeight
  ページが下にスクロールするにつれてフェードアウトし、
  ビューポートの高さまでスクロールしたときには表示されなくなる
</p>

<p data-lax-opacity="0 1, (document.body.scrollHeight*0.5) 0">
  ページが下にスクロールするにつれてフェードアウトし、
  ページが50％スクロールしたら消え、ページ全体の高さを下げる
</p>