これを使うとスクロールに連動したアニメーションが簡単に！わずか2KBの超軽量JavaScriptライブラリ -Sal.js

スクロールに連動して、ページ上の要素をアニメーションで表示するライブラリはいくつかあります。その中でもかなりの超軽量で、他スクリプトへの依存が一切ないスクロールアニメーションのライブラリを紹介します。

しかも実装は超簡単。手間がかかりそうと思っていた人は、ぜひお試しを。

Sal.js
Sal.js -GitHub

• Sal.jsの特徴
• Sal.jsのデモ
• Sal.jsの使い方

Sal.jsの特徴

• vanilla JavaScript

  vanilla JavaScriptで書かれており、他のスクリプトへの依存はありません。

• 超軽量

  2.26KBの超軽量スクリプト。

• パフォーマンス

  パフォーマンスにフォーカスして設計。

• 実装が簡単

  外部ファイルを加えて、HTMLにdata属性を加えるだけの簡単実装。

• ライセンス

  MITライセンスで、個人でも商用でも利用できます。

Sal.jsのデモ

デモでは、Sal.jsのスクロールに連動したアニメーションを楽しめます。

デモページ

三角や星などの形がslide-up, fade-in, zoom-inなど、それぞれ異なるアニメーションで表示されます。

Sal.jsの使い方

Step 1: 外部ファイル

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

Step 2: HTML

あとは、アニメーションを適用させる要素にdata属性を加えるだけです。

data属性には、以下が用意されています。

• data-sal

  アニメーションの名前（fade, slide-up, zoom-in, flip-upなど)

• data-sal-duration

  アニメーションの持続時間

• data-sal-delay

  アニメーションに遅延を追加

• data-sal-easing

  アニメーションのイージング

data属性をすべて使用すると、下記のようになります。

オプション

スクリプトのオプションも用意されています。

• threshold

  アニメーションを起動するために表示する必要がある要素の面積のパーセンテージ

• once

  アニメーションを一度起動する必要があるかどうか

• disable

  アニメーションを無効にするためのフラグ