WordPress AOSで要素に簡単に動きをつける

WordPress AOSで要素に簡単に動きをつける

 

Animate On Scroll Library

https://michalsnik.github.io/aos/

 

下記をテキトーなところに貼り付け

CSSをヘッド内に

 <link rel="stylesheet" href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css">

JSをボディの閉じタグの直前に貼り付ける

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

 

下記をJSに記述して読み込み

AOS.init({
//オプションを記述
})

追記、下記のエラーメッセージが出る場合

style.js:39 Uncaught ReferenceError: AOS is not defined

ファンクションで囲むことでエラーが解消されます。

// Animate On Scroll Library
$(function(){
AOS.init({

});
});

横並びに順番をつけてリッチにする場合は data-aos-delayを使用します。

<ul class="display_flex">
<li data-aos="fade-up" data-aos-delay="">テスト</li>
<li data-aos="fade-up" data-aos-delay="100">テスト</li>
<li data-aos="fade-up" data-aos-delay="150">テスト</li>
<li data-aos="fade-up" data-aos-delay="200">テスト</li>
<li data-aos="fade-up" data-aos-delay="250">テスト</li>
<li data-aos="fade-up" data-aos-delay="300">テスト</li>
<li data-aos="fade-up" data-aos-delay="350">テスト</li>
</ul>