1CDNを利用してJSとCSSを読み込みます
・ ・ ・ ・ ・
javascriptに関するTips
このサイトはコーディング初心者〜中級者向けの情報サイトです。掲載コードの転用制限はありませんが、
動作保証は行なっておりません。ご意見については、フォームからお知らせください。
ホームページの作成や運用ノウハウについて、プロのクリエイターが情報を無料公開！
・ ・ ・ ・ ・
たったこれだけで準備OKです！ 次はアニメーション表示させたい要素にフェードイン効果をつけてみましょう。
・・・表示させたいコンテンツ・・・ ・・・表示させたいコンテンツ・・・ ・・・表示させたいコンテンツ・・・ ・・・表示させたいコンテンツ・・・ ・・・表示させたいコンテンツ・・・ ・・・表示させたいコンテンツ・・・
これで完了です。とても簡単ですね。
このAOSの優れた点は、スピードや発火位置の細かな調整ができ、豊富なアニメーションパターンを指定できるという点です。
下記に続いてご紹介します。
AOSではアニメーション以外にも、要素を表示させるタイミングや動かす距離をオプションで指定できます。
＜オプション設定＞
offset・・・・・・スクロール画面下部からの距離（発動のタイミング）を設定
duration・・・・・アニメーションスピード
easing・・・・・・イージング
delay・・・・・・・発火タイミングの遅延
disable：’mobile’・・・モバイル端末では発動しない
disable: window.innerWidth < 768 ・・・画面幅が768px未満では発動しない
＜フェード＞ 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
アニメーション要素に属性を追加するだけで指定できます。
*CDNを利用してhead内にAOSのcss、body内にjsを読み込みます。
*CDNとは、Content Delivery Networkの略で、簡単に言うと、外部から読み込みができるプログラムの事です。
世界中のプログラマーが作成したプログラムファイルがネットワーク化されて公開されており、
読み込み速度も早く、簡単なコードで実装できます。