プロのクリエイターがホームページの作成や運用ノウハウについて無料公開!

ホームページTIPS
facebook twitter mail

このサイトでは、ホームページ制作運用に関する各種の情報を無料公開しています。
内容についてのご意見・ご指摘については、フォームからお知らせいただけば、適宜変更させていただきます。

javascriptに関するTips

2018.2.24更新

【CDN】記事一覧などに最適! スクロールに応じて要素をアニメーション表示するAOS

Attention!

画面スクロールに合わせて、末尾に1つづつ要素を表示させていくJSは色々ありますが、ブログ記事のように1つ1つの要素をループ処理で動的に生成している場合には、JSからのclassやIDを指定するのが面倒で、煩雑なスクリプトを組まなければなりません。そこで役に立つのがこの「AOS(Animate On Scroll Library」です。CDNで読み込み可能、jQueryの読み込みは必要なし、そして非常に簡単なコードで色々な動きを実装できるという優れものです。

1CDNを利用してJSとCSSを読み込みます
<head>
  ・
  ・
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.css"><!--head内に「AOS」CSSの読込-->
</head>


<body>
  ・
  ・
  ・
<script src="//cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.js"></script><!--/bodyの前に「AOS」JSの読込-->
</body>

*CDNを利用してhead内にAOSのcss、body内にjsを読み込みます。

*CDNとは、Content Delivery Networkの略で、簡単に言うと、外部から読み込みができるプログラムの事です。

世界中のプログラマーが作成したプログラムファイルがネットワーク化されて公開されており、

読み込み速度も早く、簡単なコードで実装できます。

2JSファイルの直後にAOSの設定スクリプトを書きます
<script src="//cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.js"></script><!--/bodyの前に「AOS」JSの読込-->
<script>AOS.init({ });</script><!--AOS設定スクリプト-->
</body>

たったこれだけで準備OKです! 次はアニメーション表示させたい要素にフェードイン効果をつけてみましょう。

3アニメーション表示させたい要素に「 data-aos="fade-in"」属性を付与します。
<article data-aos="fade-in">・・・表示させたいコンテンツ・・・</article>
<article data-aos="fade-in">・・・表示させたいコンテンツ・・・</article>
<article data-aos="fade-in">・・・表示させたいコンテンツ・・・</article>
<article data-aos="fade-in">・・・表示させたいコンテンツ・・・</article>
<article data-aos="fade-in">・・・表示させたいコンテンツ・・・</article>
<article data-aos="fade-in">・・・表示させたいコンテンツ・・・</article>

これで完了です。とても簡単ですね。

このAOSの優れた点は、スピードや発火位置の細かな調整ができ、豊富なアニメーションパターンを指定できるという点です。

下記に続いてご紹介します。

4アニメーションのオプション設定
<script>
 AOS.init({

 offset: 200,
 duration: 600,
 easing: 'ease-in-sine',
 delay: 100,
 disable: 'mobile',
 disable: window.innerWidth < 768

});
</script>

AOSではアニメーション以外にも、要素を表示させるタイミングや動かす距離をオプションで指定できます。

<オプション設定>

offset・・・・・・スクロール画面下部からの距離(発動のタイミング)を設定

duration・・・・・アニメーションスピード

easing・・・・・・イージング

delay・・・・・・・発火タイミングの遅延

disable:’mobile’・・・モバイル端末では発動しない

disable: window.innerWidth < 768 ・・・画面幅が768px未満では発動しない

 

5アニメーションパターンは豊富に用意されています。
<フェード>
Fade animations
fade-in
fade-up
fade-down
fade-left
fade-right
fade-up-right
fade-up-left
fade-down-right
fade-down-left


<回転>
flip-up
flip-down
flip-left
flip-right


<スライド>
slide-up
slide-down
slide-left
slide-right


<ズーム>
zoom-in
zoom-in-up
zoom-in-down
zoom-in-left
zoom-in-right
zoom-out
zoom-out-up
zoom-out-down
zoom-out-left
zoom-out-right


<その他>
data-aos-offset
data-aos-duration
data-aos-easing
data-aos-delay
data-aos-anchor
data-aos-anchor-placement
data-aos-once


アニメーション要素に属性を追加するだけで指定できます。

6複数の属性指定をする場合の書き方
<div data-aos="fade-in" data-aos-easing="ease-in-sine" data-aos-once="true">アニメーションさせたいコンテンツ</div>

このように要素の属性に追加すれば、色々な動きを実装できます。

詳しくはGitHubでも紹介されています。

トップへ