実装がどんどん簡単になっている！スクロールに連動するCSSアニメーションを与えるスクリプト -Delighters

サイト構築 -JavaScript

Post on:2018年6月22日

Delightersの特徴

DelightersはCSSアニメーションを加えて、ユーザーがスクロールするのを楽しませるスクリプトです。

超軽量

1.43kBの超軽量スクリプトで、他のスクリプトやスタイルシートに依存はありません。
フレームワークにとらわれない

React、VueJS、Angular、jQueryなど、フレームワークにとらわれずに動作します。
レスポンシブに完全対応

スマホ・タブレット・デスクトップ、さまざまなデバイス・さまざまなスクリーンサイズに対応。
フレキシブル

さまざまな要素に簡単にアニメーションを適用できます。
宣言的

CSSで定義したデフォルトのスタイル、スタート時のスタイル、エンド時のスタイル間を繋ぐアニメーション。

Delightersのデモ

デモページでは、Delightersで実装されたアニメーションを楽しめます。

デモページ

その中からいくつか見てましょう。
まずは、左右からスライドして要素が表示されるアニメーション。

スクロールすると、要素が少しずつ表示されるアニメーション。

要素が下からプッシュされるアニメーション。

Delightersの使い方

Step 1: 外部ファイル

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

<head>
  ...
  <script type="text/javascript" src="delighters.js">
</head>

<head>

...

</head>

Step 2: HTML

HTMLはアニメーションを与える要素に「data-delighter」を加えるだけです。

<div class="foo" data-delighter>

1	<div class="foo" data-delighter>

Step 3: アニメーションの設定

アニメーションは、CSSで設定します。
要素に基本のスタイルを定義し、アニメーションのスタート時とエンド時のスタイルを定義します。.delighter, .started, .endedはスクロール時に自動で適用されます。

/* 基本のスタイル */
   .foo.delighter {
      transition: all .3s ease-out;
      transform: translateX(-100%);
      opacity: 0;
   }

/* スタート時のスタイル */
   .foo.delighter.started {
      transform: none;
      opacity: 1;
   }

/* エンド時のスタイル */
   .foo.delighter.started.ended {
      border: solid red 10px;
   }

/* 基本のスタイル */

.foo.delighter {

transition: all .3s ease-out;

transform: translateX(-100%);

opacity: 0;

}

/* スタート時のスタイル */

.foo.delighter.started {

transform: none;

opacity: 1;

}

/* エンド時のスタイル */

.foo.delighter.started.ended {

border: solid red 10px;

}

動作の仕組み

Delighters.jsは、ユーザーがスクロールした時にclassを切り替えます。
要素がブラウザのビューポートの高さの75％を上回ると、.startedが適用され、
要素の下部が75％を過ぎると、.endが適用されます。
※この値はスクリプトのオプションで変更できます。

  options = {
    attribute:  'data-delighter',
    classNames: ['delighter', 'started', 'ended'],
    start:      0.75, // default start threshold
    end:        0.75, // default end threshold
    autoInit:   true  // initialize when DOMContentLoaded
  }