スクロールに連動してフェード、フリップ、ズーム等のアニメーションを実装できるJSライブラリ「AOS」!

2016/06/21

こんにちは。
今回はスクロールに連動してフェード、フリップ、ズーム等のアニメーションを実装できるJSライブラリ「AOS」!です。

簡単にスクロールに応じて、フェード、フリップ、ズーム等のエフェクトを実装できるJSライブラリを紹介します。

スクロールに連動してフェード、フリップ、ズーム等のアニメーションを実装できるJSライブラリ「AOS」!

AOS

aos-animate-on-scroll-library

 

「AOS」を設置してみよう!

CSSもJSもCDNで提供されていますよ。
aos.cssをhead内に読み込みます。

 

aos.jsを/bodyの手前に読み込みます。

 

その下に下記のスクリプトを記述します。

 

html部分を記述します。
使用したいアニメーションのクラス名を設定します。
フェードだと「fade-up」になりますよ。

 

複数指定する場合はこんな感じです。

 

実践Webデザイン jQuery+CSSフレームワークでサクサクつくる「動き」と「仕掛け」
実践Webデザイン jQuery+CSSフレームワークでサクサクつくる「動き」と「仕掛け」

 

いかがでしたか。簡単にかっこいいエフェクト加える事ができるので、良いですね。
以上でスクロールに連動してフェード、フリップ、ズーム等のアニメーションを実装できるJSライブラリ「AOS」!でした。

RELATED POST