最近は動くヒーローイメージが当たり前になってきましたね。
今回はjQuery、JavaScriptを使わずに、
cssだけでズームしながらふわっと表示が切り替わるスライドショーを作ってみたいと思います。
まずはデモをご覧ください
background-imageで表示するパターンと
imgタグで表示するパターンとを用意してみました。フェードイン・フェードアウトの動きは共通です。
スライドアニメーションに関してはどちらもcssのanimationで実装しています。
<div class="main_imgBox">
<div class="main_img" style="background-image: url(###)"></div>
<div class="main_img" style="background-image: url(###)"></div>
<div class="main_img" style="background-image: url(###)"></div>
<div class="main_img" style="background-image: url(###)"></div>
<div class="main_img" style="background-image: url(###)"></div>
<div class="main_img" style="background-image: url(###)"></div>
</div>
main_imgBoxで、スライドの中身を囲んでいます。
.main_imgBox {
height: 680px;
overflow: hidden;
position: relative; }
ここでスライドの高さや幅を設定します。
overflow: hidden;にし、imgがズームした時にはみ出た部分を隠します。
このboxが基準となるのでposition: relative;とします。
.main_img {
z-index:10;
opacity: 0;
width: 100%;
height: 680px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
left: 0;
top: 0;
-webkit-animation: anime 36s 0s infinite;
animation: anime 36s 0s infinite; }
スライドの中身です。
初期値をopacity: 0;にして表示を隠します。
外接リサイズになるようbackground-size: cover;とします。
position: absolute;で、スライドの中身を.main_imgBoxに合わせて重ねます。
紙芝居のようなイメージでスライドをを切り替えていくような構成です。
animation: anime 36s 0s infinite;
animationにanimeという名前をつけます
6枚のスライドを6秒ずつ、
36秒間かけてアニメーションし、infiniteによって再生をループします。
.main_img:nth-of-type(2) {
-webkit-animation-delay: 6s;
animation-delay: 6s; }
.main_img:nth-of-type(3) {
-webkit-animation-delay: 12s;
animation-delay: 12s; }
.main_img:nth-of-type(4) {
-webkit-animation-delay: 18s;
animation-delay: 18s; }
.main_img:nth-of-type(5) {
-webkit-animation-delay: 24s;
animation-delay: 24s; }
.main_img:nth-of-type(6) {
-webkit-animation-delay: 30s;
animation-delay: 30s; }
animation-delay: で、アニメーションの開始時間をずらします。
6秒づつで現れるスライドが切り替わります。
@keyframes anime {
0% {
opacity: 0;
}
8% {
opacity: 1;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
transform: scale(1.2) ;
z-index:9;
}
100% { opacity: 0 }
}
opacity: 0;で表示の変更
transform: scaleでサイズの変更をします。
3秒目から、3秒目かけてフェードイン。
36秒間かけてアニメーションするので、3秒は8%、6秒は17%ですね。
6秒後に次のスライドが再生されるので、
ここからまた3秒目かけてフェードアウト。
この間、1.2倍まで画像はズームされます。
6枚目よりも1枚目が上に来るようにz-indexを一つ下げています。
少しわかりにくいですが、図にするとこんな感じです。
そのまま実装しても動きますが、この計算がわかっていると
スライドの枚数や時間の変更をしたい時に調整ができますよ。
動きを変えてみたり、上に文字を乗せてみたりと
色々試してみると面白いと思います。
javascriptやプラグインを使うほどじゃないときなどに、方法を知っていると便利です。
animationのくわしい解説はこちらも参考にしてください。
CSSのanimationでふわふわさせたりブルブルさせたりする
【CSS】オンマウスで要素をブルブルさせる【animation】
しずおかオンライン中途採用社員も、積極募集中!
しずおかオンラインののスタッフとして、地域の魅力を伝える仕事です。
くわしくはこちら!