AOSとは、下にスクロール時に、コンテンツまでスクロールしたタイミングで、そのコンテンツがふわっと
表示されるアニメーションの仕組みのこと
早速、HTMLとJSを記述します。
１）HTML
まず、ふわっとさせたいコンテンツの先頭に以下のように記述します
<!-------------------------------AOS記述--------------------------------->
<div class="service-items cards" data-aos="zoom-in-up" data-aos-duration="2000">
<!----------------------------------------------------------------------->
CSSファイル、JSファイルも以下のように読み込みます
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
２）JS
JSを記述しているファイルに以下の記述をします
//AOS//
AOS.init();
//AOS//
以上です
コメント