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

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

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

サイトのキャプチャ

Sal.js
Sal.js -GitHub

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
    アニメーションを無効にするためのフラグ

sponsors

top of page

©2024 coliss