CSS初心者にも簡単に使える!スクロールに連動するさまざまなエフェクトを実装できるスクリプト -AOS

スクロールすると、コンテンツをふわっと表示させたり、パタリと回転させたり、ズームさせたり、軽快なアニメーションを使ったエフェクトを実装できるスクリプトを紹介します。

jQueryは不要で、非常に軽量のライブラリです。
実装は簡単で、外部ファイルを2行記述して、classを与えるだけ。

サイトのキャプチャ

AOS - Animate on scroll library
AOS -GitHub

AOSのデモ

デモでは、スクロールに連動したさまざまなエフェクトを楽しめます。

デモのキャプチャ

デモページ: Fade

デモのキャプチャ

デモページ: Flip

デモのキャプチャ

デモページ: Zoom

デモのキャプチャ

デモページ: 個別設定

デモのキャプチャ

デモページ: トリガーとなる要素を別に指定

AOSの使い方

Step 1: 外部ファイル

当スクリプトとスタイルシートを外部ファイルとして記述します。
cssもjsファイルもCDNで提供されています。

Step 2: JavaScript

スクリプトを初期化します。

HTML

あとは、各要素にclassでアニメーションを設定するだけです。
フェードの指定は、「.fade-up」をつけるだけ。

複数の設定をすることもできます。

top of page

©2017 coliss