2020年1月22日JavaScriptでスクロール時にアニメーションをつけたい。簡単に実装できるライブラリはないかなーと探していたら、「AOS」を見つけました。30DAYSトライアルでは、「wow.js」を使い、かなり使いやすかったですが、AOSも簡単に実装できたので、ご紹介します。具体的な実装の手順です。CDNでCSSとjavascript読み込み公式サイトからサンプルコードを貼り付けオプションの設定CDNでCSSとjavascript読み込みCDNでCSSとJavaScriptを読み込みます。src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script></body>タグの直前に、AOSの呼び出しのためのコードを書きます。AOS.init();</script>これで、準備完了です。公式サイトからサンプルコードを貼り付けAOSの公式サイトで、サンプルコード付きのDEMOを確認できますが、記述するべきコードも簡略化されていてわかりやすいです。下からフェードしてくるアニメーションの場合、アニメーションさせたい要素に対して、以下のデータ属性をつけるだけでオッケー。data-aos="fade-up"></div>https://keibloglife.com/wp-content/uploads/2019/09/画面収録-2019-09-03-8.37.59.mp4こんな感じですが、本当に簡単です。AOS公式サイトオプションの設定もちろん細かいオプションも設定することができます。</div>詳細については、GitHubを確認してください。オプションは、要素に直接記述することで個別に設定することができます。共通で設定する場合は、JavaScriptで設定をします。'true'});</script>特に、data-aos-onceは、初期値がfalseになっているので、上下にスクロールするたびにアニメーションが発生してしまいます。JavaScriptに共通オプションとして設定するといいかもですね。BlogスポンサーリンクスポンサーリンクSearchWebコーダーKohei8年勤めた職場を退職し、完全未経験からWebコーダーに転職しました。