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

ホームページTIPS
facebook twitter mail

このサイトはコーディング初心者〜中級者向けの情報サイトです。掲載コードの転用制限はありませんが、
動作保証は行なっておりません。ご意見については、フォームからお知らせください。

javascriptに関するTips

更新日:2018.2.24

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

解 説

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

1CDNを利用してJSとCSSを読み込みます

  ・
  ・





  ・
  ・
  ・

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

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

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

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

2JSファイルの直後にAOSの設定スクリプトを書きます


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

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

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

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

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

4アニメーションのオプション設定

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複数の属性指定をする場合の書き方
アニメーションさせたいコンテンツ

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

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

トップへ