JS

Delighters -GitHub（ダウンロードはこのサイトから）
 

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

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

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

<div class="foo" data-delighter>

<div class="foo" data-delighter="start:1.0">

アニメーションの設定
アニメーションは、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;
}

動作の仕組み

• Delighters.jsは、ユーザーがスクロールした時にclassを切り替えます。
• 要素がブラウザのビューポートの高さの75％を上回ると、.startedが適用される。
• 要素の下部が75％を過ぎると、.endが適用されます。

※この値はスクリプトのオプションで変更できます。

options = {
	attribute:  'data-delighter', // 属性
	classNames: ['delighter', 'started', 'ended'], // クラス名
	start:      0.75, // デフォルトの開始値
	end:        0.75, // デフォルトの終了値
	autoInit:   true  // DOMContentLoaded時に初期化
}