こんにちは。
モンブランの江藤です。
久々の技術的なブログ更新となってしまいました。
ボスの「くろいまなざし」からは逃れることはできませんね。
今回ご紹介するサイトは掃除之助さんより。
東亜不動産さんのグループ会社で
住宅を知り尽くした不動産会社が営むハウスクリーニングだからこそ可能な
高いクオリティとホスピタリティを誇る会社です。
実績ページでも紹介していますのでこちらもチェックを！
重なった画像が入れ替わるカード型スライド
スライダーといえばSlickやSwiper！
最初は脳死で上記どちらかを使用して実装しようと思っていたのですが、なかなか上手くいかず。。
よくよく考えたらjsいらないんじゃない？？ということに気づき
いつも通りHTMLとCSSでガチャガチャやってたら実装できました！
実際の動きはこちら！
斜めに重なった画像が時間経過と共に入れ替わって、
ちゃんと一番上から一番下に移動していますね。
該当箇所のHTMLソースはこんな感じ。
CSSでの動きの指定もシンプルです。
「slide01」だけposition: relative;を指定して要素の高さを確保。
「slide02」「slide03」は同じ位置に重ねる為position: absolute; を指定してます。
そして動きの部分は下記のアニメーションを設定。
@keyframes intro_slide {
0% { z-index:3;opacity:1;}
28%{ opacity:1;}
33.33% { z-index:3;opacity:0;}
34% { z-index:1;}
38.66%{ opacity:1;}
66.65% { z-index:1;}
66.66% { z-index:2;}
99.99% { z-index:2;}
100% { z-index:2;}
}
スライドは3枚なので大体1/3である33%ごとにz-indexの値の入れ替える事により画像の重なりを制御。
28%→33.33%→38.66%でopacityの値を1→0→1にする事によって
透明度を0にして画像を非表示→z-indexで画像の位置を一番下へ→透明度を0から1へ徐々に制御してカードを一番下へ表示。
といった形になります。
最後に大事な事がアニメーションのタイミング。
全体のアニメーションを12秒に設定し、
12（全体のアニメーション秒数）/ 3（スライドの数） = 4 なので
「slide02」にはanimation-delay: 4s;、「slide03」にはanimation-delay: 8s; を指定して、
4秒ずつずらしてアニメーションを実行しています。
今まで スライド=JSで実装！と思っていたので、
案外CSSでもいけるな〜と、頭を柔らかくする良い機会でした。
それでは今回ご紹介した「掃除乃助」さんのサイトはこちら！
江戸時代を意識した服装の方々がサイトの至る所にいるので見応えバッチリです！笑