AOS.jsをSimple Custom CSS and JSを使用して実装

今回はAOS.jsを使用した動きのあるサイトのご依頼があり、
Simple Custom CSS and JSプラグイン（無料の範囲）を使用して安全に実装した時のお話をしたいと思います。

まず、AOS使用が初見だった為私のテストサイトで動かしてから
クライアントへ移しました。

AOS.js：https://michalsnik.github.io/aos/

AOS下準備

AOSの下準備は周知されている通りですが、
AOSのサイトからCDN SOURCESのところまで下がって、コードをコピーしました。
カスタムHTMLへ追記していきます。
設定は以下です。

CSSのコードは

表示位置：ヘッダー
表示対象：フロントエンド

JSのこちらのコードと、AOS使うよ〜のコード（INITIALIZE AOS）は
HTMLのbodyの閉じタグの直前へ記述しないといけないので

表示位置：フッター
表示対象：フロントエンド

こちらで大丈夫でした。

INITIALIZE AOSは、カスタムJSへ記述でもきっと良いですね。

記述

今回はヘッダーのキービジュアルの実装だったので一番震えたのは、
グローバルメニューを入れ込むところと
下層ページのページヘッダーはどう対応するか
の辺りです。

テストサイトではグローバルメニューをテーマのものを使用していた為すんなり表示までいけましたが、
クライアント様のサイトはCSSで作られたヘッダーが元々あった為、少々苦労しましたが移設から1日で対処は完了しました。

今回コードを記述すると大変長いので、苦労した点を書きたいと思います。
HTMLでそのまま画像を記述するやり方がよく紹介されていますが
今回のヘッダーは「画像の羅列が４段で動かす」と、量が多いので下記のコードのようにリストにし、クラス指定で番号を振ります。

  <div class="keyvisual-img">
      <div class="画像に必要なクラス" data-aos="fade-in">
        <div class="img-unit unit01">
          <ul>
            <li><span class="img01"></span></li>
            <li><span class="img02"></span></li>
            <li><span class="img03"></span></li>・・・・・

今の記述では、リスト表示のままです。
以下のCSSでこちらのリスト表示を消して、
それぞれの対応するimg番号へ、対応する画像を当てます。

ol, ul, li {
    list-style: none;
}

.img-unit ul li span.img01 {
    background: url(画像の相対パス.jpg) 50% 50% / cover no-repeat;
}

発生トラブル

見た目は整っても一向に動く気がしない画像たち。
詰んでしまったのかと正直ショックでしたが、何かが足りないと探りました。

CSSKeyframesRule

この CSS には keyframes アットルールがあります。
そしてプロパティとプロパティ値には、
要素の表示位置を移動させるtransform: translateXが必要でした。
（今回の場合X軸方向へ動かしたいのでtranslateX()関数を採用）

@keyframes 任意の名前{
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(任意);
  }
}

0%（またはfrom）はアニメーション開始時を表しており、100% （またはto）はアニメーション終了時を表しています。

CSS3からは必要が各ブラウザへ対応できているとはいえ、現状ブラウザによっては対応していないものがあり、「ベンダープレフィクス」を付ける場合があります。
Google Chrome/Safari は「-webkit-」という形でそれぞれ対応しているものを付与する必要があります。
ベンダープレフィクスをプロパティ名や値の先頭に付けて使用することが推奨されています。

以上の指示を追加で動くようになりました。
もうダメかと思ったので、動いた瞬間は泣けました。

逆方向へ動かす

４段中下の２段は逆方向へ動かすのでこちらの指示も入れています。

セレクター{
animation-direction:reverse;
}

最後に

以上が私が実装したAOS.jsです。
調べる中で、なかなかSimple Custom CSS and JSを使用されている方も、情報も少ないので
シェアさせて頂きました。

運動会の時にデータチェックをする時に初期化してしまう失態を経験したので、
また次の機会にでもシェアさせて頂きたいと思います。

とほほでした。。
寒さが一段と厳しくなって参りました。
霜月も皆様、お元気でお過ごしくださいね！

AOS下準備

記述

発生トラブル

逆方向へ動かす

最後に