2018/08/30
超軽量！スクロールアニメーションスクリプト Delighters
コンテンツが横からスライドしたり、コンテンツが追従するように表示されたり、スクロールに合わせてCSSアニメーションを実装できるスクリプトをご紹介します。
Delightersについて
DelightersはCSSアニメーションを加えて、ユーザーがスクロールするのを楽しませるスクリプトです。
- 超軽量
1.43kBの超軽量スクリプトで、他のスクリプトやスタイルシートに依存はありません。
- フレームワークにとらわれない
React、VueJS、Angular、jQueryなど、フレームワークにとらわれずに動作します。
- レスポンシブに完全対応
スマホ・タブレット・デスクトップ、さまざまなデバイス・さまざまなサイズに対応しています。
- フレキシブル
さまざまな要素にアニメーションを適用できます。
- 宣言的
CSSで定義したデフォルトのスタイル、スタート時のスタイル、エンド時のスタイル間を繋ぐアニメーションが指定できます。
実際にデモページを見てみましょう。
Delighters
スクロールをしていくとコンテンツが様々な方向から出てきます。
こういった動きを入れると重たくなりがちですが、超軽量スクリプトなので気にせず使えます！
では続いてDelightersの使い方です。
使い方
1.JSファイルの読み込み
まず、Delighters -GitHubからファイルをダウンロードし、jsファイルを読み込みます。
<head> <script type="text/javascript" src="delighters.js"> </head>
2.HTMLの記述
HTMLはアニメーションを与える要素に「data-delighter」を加えるだけです。
<div class="content" data-delighter>testtest</div>
3.アニメーションの設定
アニメーションはCSSで設定していきます。
要素に基本のスタイルを定義し、アニメーションのスタート時とエンド時のスタイルを定義します。
.delighter, .started, .endedはスクロール時に自動で適用されます。
/* 基本のスタイル */
.content.delighter {
transition: all .3s ease-out;
transform: translateX(-100%);
opacity: 0;
}
/* スタート時のスタイル */
.content.delighter.started {
transform: none;
opacity: 1;
}
/* エンド時のスタイル */
.content.delighter.started.ended {
border: solid red 10px;
}
動作の仕組みについて
delighters.jsのファイルの中を見てみましょう。
下記の記述が出てきます。
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
}
Delighters.jsは、ユーザーがスクロールした時にclassを切り替え、要素がブラウザのビューポートの高さの75％を上回ると、.startedが適用され、要素の下部が75％を過ぎると、.endが適用されます。
この値を変更することで動きの見え方を変える事ができます。
まとめ
スクロール時のアニメーションするスクリプトは色々とありますが、軽さを求める方にぜひおすすめしたいスクリプトです。
デモページが参考になるので、まずはダンロードして使ってみてくださいね。
コーディング業務のご依頼、ご相談の詳細についてはこちらから
最後までお読みいただき、ありがとうございました。
よろしければシェアしていただければ幸いです。
| 次の記事へ | 前の記事へ |
WEB業界ならqam！qam（カム）はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ（コーディング）、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど（読めば読むほど）制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。
