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

コンテンツが横からスライドしたり、カードが追従するように表示されたり、スクロールに連動するCSSアニメーションを簡単に実装できるスクリプトを紹介します。

汎用性に非常に優れており、デスクトップ・タブレット・スマホを完全にサポートしています。また、他のスクリプトやスタイルシートに依存はなく、React、VueJS、Angular、jQueryなどと一緒に利用することもできます。

サイトのキャプチャ

Delighters
Delighters -GitHub

Delightersの特徴

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

  • 超軽量
    1.43kBの超軽量スクリプトで、他のスクリプトやスタイルシートに依存はありません。
  • フレームワークにとらわれない
    React、VueJS、Angular、jQueryなど、フレームワークにとらわれずに動作します。
  • レスポンシブに完全対応
    スマホ・タブレット・デスクトップ、さまざまなデバイス・さまざまなスクリーンサイズに対応。
  • フレキシブル
    さまざまな要素に簡単にアニメーションを適用できます。
  • 宣言的
    CSSで定義したデフォルトのスタイル、スタート時のスタイル、エンド時のスタイル間を繋ぐアニメーション。

Delightersのデモ

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

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

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

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

Delightersの使い方

Step 1: 外部ファイル

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

Step 2: HTML

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

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

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

動作の仕組み

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

sponsors

top of page

©2018 coliss