今回はAOS.jsを使用した動きのあるサイトのご依頼がありましたので
Simple Custom CSS and JSプラグイン（無料の範囲）を使用して安全に実装した時のお話をしたいと思います。
まず、AOS使用が初見だった為テストサイトで動かしてから
クライアントへ移しました。
AOS下準備
AOSのサイトからCDN SOURCESのところまで下がって、コードをコピーしました。
CSSのこちらのコードは
- 表示位置：ヘッダー
- 表示対象：フロントエンド
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">JSのこちらのコードと、AOS使うよ〜のコード（INITIALIZE AOS）は
HTMLのbodyの閉じタグの直前へ記述しないといけないので
- 表示位置：フッター
- 表示対象：フロントエンド
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>INITIALIZE AOS
<script>
AOS.init();
</script>コード記述
今回はヘッダーのキービジュアルの実装だったので一番震えたのは、
グローバルメニューを入れ込むところと
下層ページのページヘッダーはどう対応するか
の辺りです。
テストサイトではグローバルメニューをテーマのものを使用していた為すんなり表示までいけましたが、
クライアント様のサイトは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;
}動かないトラブル
見た目は整っても一向に動く気がしない画像たち。
詰んでしまったのかと正直ショックでしたが、何かが足りないと探りました。
この 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を使用されている方も、情報も少ないので
シェアさせて頂きました。
コメント