スクロールに応じてアニメーションを実装できるJSライブラリ「AOS」

スクロールに応じてアニメーションを実装できるJSライブラリを紹介します。

スクロールに応じてアニメーションを実装できるライブラリ「aos.js」
AOS

AOSの紹介

スクロールに応じて要素にアニメーションを実装することができるライブラリです。

フェード、フリップ、ズームなど、様々なアニメーションを実装することができます。

アニメーションの速度や種類もシンプルに設定することができ、モバイル端末や画面の横幅が一定以下の環境ではアニメーションを無効にできるなど、必要なオプションが揃っています。

スクロールアニメーションのサンプル

使い方

ソースコードはGitHubで公開されています。

基本の使い方

CSS

スタイルシートを読み込みます。

HTML

アニメーションを実行したい要素に、data-aos属性をつけます。

JS

スクリプトを読み込みます。

スクリプトを実行します。

これで、アニメーションの実装ができます。

オプション

速度やアニメーションの調整など、様々なオプションもいろいろと用意されています。

オプションは、個別の要素ではなく、全体に共通で設定することもできます。

モバイル端末ではアニメーションを無効にすることができます。設定できるのは、mobile(phone & tablet)、phone、tabletの3種類です。

画面の横幅によって無効にすることもできます。

人気の記事

日本語対応の無料WordPressテーマ10選
日本語対応の無料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ3選
アドセンス運用に最適なWordPressテーマ3選

コメント

  • Posted on
  • Updated on
  • Views 1,973