備忘録11〜スクロールでアニメーションを実行したい

スクロールしたら横から出てくるようなのを実装しようかと思い・・・色々調べてみました。

jQuery非依存でスクロールアニメーションを実装できる「AOS」というのが、便利そうなので実装します。

用意するもの

必要なものを、ダウンロードします。

こちらから

または、DEMOページにCDNが用意されているのでそちらをコピーしておきます。

設置します

CDNでの設置で進めます。

以下のCSSとJavaScriptをヘッダーまたはフッターに設置します。

今風ならばCSSをヘッダーにJavaScriptをフッターに記述するのが良いでしょう。

<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>

動作をさせるため、こちらを書きます。

利用するページのフッターがいいと思います。

wordpressを利用の場合は、テーマによっては子テーマにかけるものもあります。

単一ページのみであるなら、そのページの追加ヘッダーかカスタムHTMLなどに入力すると動きます。

<script>
 AOS.init();
</script>

HTML

HTMLをかきます。

<!--要素に指定する場合-->
<div data-aos="fade-up"></div>

<!--画像に指定する場合-->
<img data-aos="fade-left" src="/img/xxx.jpg">

画像に指定した場合

ズームインしているかと思います。

アニメーションの種類

アニメーションの種類も豊富です。設定の方法ですが

data-aos="xxxx"

xxxxにアニメーションの名称を設定するだけです。

  • Fade animations:
    • fade
    • fade-up
    • fade-down
    • fade-left
    • fade-right
    • fade-up-right
    • fade-up-left
    • fade-down-right
    • fade-down-left
  • Flip animations:
    • flip-up
    • flip-down
    • flip-left
    • flip-right
  • Slide animations:
    • slide-up
    • slide-down
    • slide-left
    • slide-right
  • Zoom animations:
    • 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アニメーション発火までの距離設定（px）120
data-aos-durationアニメーションの秒数（ms）400
data-aos-easingアニメーションのイージング設定ease
data-aos-delayアニメーション発火を遅らせる秒数（ms）0
data-aos-anchor指定の要素までスクロールした際にアニメーションを発火させる設定無し
data-aos-anchor-placement要素のどの位置までスクロールしたらアニメーションを発火させるかの設定top-bottom
data-aos-onceアニメーションの発火を1回のみにするか否かの設定false

ata-aos-anchor-placementの種類

「data-aos-anchor-placement」というオプションは、要素のどの位置までスクロールしたらアニメーションを発火させるかの設定です。

設定名内容
top-bottom要素の上部が画面の下部までスクロールしたら発火
（デフォルトではこれ）
top-center要素の上部が画面の中央までスクロールしたら発火
top-top要素の上部が画面の上部までスクロールしたら発火
center-bottom要素の中央部が画面の下部に来たら発火
center-center要素の中央部が画面の中央に来たら発火（ど真ん中）
center-top要素の中央部が画面の上部に来たら発火
bottom-bottom要素の下部が画面の下部に来たら発火
bottom-center要素の下部が画面の中央に来たら発火
bottom-top要素の下部が画面の上部に来たら発火

試しに下記のように入れると・・・

<div
 data-aos="fade-up"
 data-aos-offset="200"
 data-aos-duration="2000"
 data-aos-delay="1000"
 data-aos-anchor-placement="top-center">
</div>
テストです

下から要素が出てきたかと思います。

他にも、カスタマイズが可能なようですので下記のサイトを参考に設置してみてください。

公式ページと上記記事を見比べながら、設置を完了しました。

フロントページで使っているのでご確認ください。

今日はここまで！

スポンサーリンク

備忘録CSS,JavaScript,アニメーション,ワードプレス