実装がどんどん簡単になっている!スクロールに連動するCSSアニメーションを与えるスクリプト -Delighters
Post on:2018年6月22日
コンテンツが横からスライドしたり、カードが追従するように表示されたり、スクロールに連動するCSSアニメーションを簡単に実装できるスクリプトを紹介します。
汎用性に非常に優れており、デスクトップ・タブレット・スマホを完全にサポートしています。また、他のスクリプトやスタイルシートに依存はなく、React、VueJS、Angular、jQueryなどと一緒に利用することもできます。
Delightersの特徴
DelightersはCSSアニメーションを加えて、ユーザーがスクロールするのを楽しませるスクリプトです。
-
- 超軽量
- 1.43kBの超軽量スクリプトで、他のスクリプトやスタイルシートに依存はありません。
-
- フレームワークにとらわれない
- React、VueJS、Angular、jQueryなど、フレームワークにとらわれずに動作します。
-
- レスポンシブに完全対応
- スマホ・タブレット・デスクトップ、さまざまなデバイス・さまざまなスクリーンサイズに対応。
-
- フレキシブル
- さまざまな要素に簡単にアニメーションを適用できます。
-
- 宣言的
- CSSで定義したデフォルトのスタイル、スタート時のスタイル、エンド時のスタイル間を繋ぐアニメーション。
Delightersのデモ
デモページでは、Delightersで実装されたアニメーションを楽しめます。
その中からいくつか見てましょう。
まずは、左右からスライドして要素が表示されるアニメーション。
スクロールすると、要素が少しずつ表示されるアニメーション。
要素が下からプッシュされるアニメーション。
Delightersの使い方
Step 1: 外部ファイル
当スクリプトを外部ファイルとして記述します。
1 2 3 4 |
<head> ... <script type="text/javascript" src="delighters.js"> </head> |
Step 2: HTML
HTMLはアニメーションを与える要素に「data-delighter」を加えるだけです。
1 |
<div class="foo" data-delighter> |
Step 3: アニメーションの設定
アニメーションは、CSSで設定します。
要素に基本のスタイルを定義し、アニメーションのスタート時とエンド時のスタイルを定義します。.delighter, .started, .endedはスクロール時に自動で適用されます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/* 基本のスタイル */ .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が適用されます。
※この値はスクリプトのオプションで変更できます。
1 2 3 4 5 6 7 |
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 } |
sponsors