Contents
「webサイトのヘッダー部分にスライドショーを入れたい」「スライドショーを使ってなにか作りたい」と思っている方など、スライドショーでこういう制作がしたい！と考えている人は多いと思います。
それと同時に、「スライドショーは難しそう」「JQueryやJavaScriptの使い方がわからない」という方もいると思うので、この記事では、HTML・CSSのみでスライドショーをまとめました。
スライドショーの種類は色々ありますが、その中からよりWeb制作に実用的なものをまとめたので、ぜひ自分なりにカスタマイズして使って見てください。
実用的で基本的なスライドショーとして、フェードイン・フェードアウトするスライドショーになります。
ファースビューの背景などに使えるスライドショーになります。
See the Pen slide1 by 古澤 良汰 (@ryotarofu) on CodePen.
<div class="slide"> <img class="item1" src="/images/item1.jpg" alt=""> <img class="item2" src="/images/item2.jpg" alt=""> <img class="item3" src="/images/item3.jpg" alt=""> <img class="item4" src="/images/item4.jpg" alt=""> </div> .slide { position: relative; width: 100%; height: 400px; overflow: hidden; } @keyframes slideshow{ 0%{ opacity: 0; } 10%{ opacity: 1; } 28%{ opacity: 1 } 38%{ opacity: 0; } 100%{ opacity: 0; } } .slide img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: auto; opacity: 0; animation :slideshow 20s linear infinite; } .slide img:nth-child(2){ animation-delay: 8s; } .slide img:last-child{ animation-delay: 16s; }このスライドショーは３枚での設定になっているので、写真を４枚以上使用すると崩れてしまいます。
４枚以上スのライドショーをCSSで実装する場合には、キーフレームを使ったCSSアニメーションの知識が必要になってきます。
上記の基本的なスライドショーに、範囲内での拡大・縮小を加えたスライドショー
overflowを使用することで、枠内からはみ出さずに画像が拡大・縮小します。
ファースビューの背景にアクセントを付けたいときや、フードメニューなど様々な場面で活躍する便利なスライドショーになっています。
See the Pen スライド２ by 古澤 良汰 (@ryotarofu) on CodePen.
<div class="slide"> <img class="item1" src="/images/item1.jpg" alt=""> <img class="item2" src="/images/item2.jpg" alt=""> <img class="item3" src="/images/item3.jpg" alt=""> <img class="item4" src="/images/item4.jpg" alt=""> </div> .slide{ position: relative; width: 500px; height: 300px; overflow: hidden; margin: 0 auto;
}
.item1, .item2, .item3 ,.item4{ position: absolute; top:0; left:0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat;
}
.item1{ animation: slide1 20s infinite;
}
.item2{ animation: slide2 20s infinite;
}
.item3{ animation: slide3 20s infinite;
}
.item4{ animation: slide4 20s infinite;
}
@keyframes slide1 { 0% {opacity: 1; transform: scale(1.0);} 20% {opacity: 1;} 30% {opacity: 1;} 40% {opacity: 0; transform: scale(1.1);} 90% {opacity: 0} 100% {opacity: 1; transform: scale(1.0);}
}
@keyframes slide2 { 0% {opacity: 0;} 30% {opacity: 0; transform: scale(1.1);} 40% {opacity: 1;} 50% {opacity: 1;} 60% {opacity: 0; transform: scale(1.0);} 100% {opacity: 0;}
}
@keyframes slide3 { 0% {opacity: 0;} 50% {opacity: 0; transform: scale(1.0);} 60% {opacity: 1;} 70% {opacity: 1;} 90% {opacity: 0; transform: scale(1.1);} 100% {opacity: 0;}
}
@keyframes slide4 { 0% {opacity: 0;} 70% {opacity: 0; transform: scale(1.1);} 80% {opacity: 1;} 90% {opacity: 1;} 100% {opacity: 0; transform: scale(1.0);}
}写真をホーバーすると、スライドが止まり、写真が浮き上がるスライドショー。
インスタグラムの投稿や、写真にリンクを付けたいとこなどに有効になってきます。
See the Pen スライド３ by 古澤 良汰 (@ryotarofu) on CodePen.
<div class="wrap slider" ontouchstart=""> <div class="slide"> <img class="item1 item" src="/images/item.jpg" alt=""> <img class="item2 item" src="/images/item.jpg" alt=""> <img class="item3 item" src="/images/item.jpg" alt=""> <img class="item4 item" src="/images/item.jpg" alt=""> </div> <div class="slide"> <img class="item1 item" src="/images/item.jpg" alt=""> <img class="item2 item" src="/images/item.jpg" alt=""> <img class="item3 item" src="/images/item.jpg" alt=""> <img class="item4 item" src="/images/item.jpg" alt=""> </div> <div class="slide"> <img class="item1 item" src="/images/item.jpg" alt=""> <img class="item2 item" src="/images/item.jpg" alt=""> <img class="item3 item" src="/images/item.jpg" alt=""> <img class="item4 item" src="/images/item.jpg" alt=""> </div> </div> img { width: 200px; height: 200px; } .wrap { overflow: hidden; display: flex; align-items: center; height: 340px; margin-bottom: 100px; } .slide { display: flex; -webkit-animation: slide 20s infinite linear 1s both; animation: slide 20s infinite linear 1s both; } @-webkit-keyframes slide { from { transform: translateX(0); } to { transform: translateX(-100%); } } @keyframes slide { from { transform: translateX(0); } to { transform: translateX(-100%); } } .slider:hover .slide { -webkit-animation-play-state: paused; animation-play-state: paused; } .item { transition: all 0.2s; margin-right: 20px; } .item:hover { transform: translateY(-20px); border-radius: 10px; box-shadow: 0 3px 10px 0 #333; opacity: 1; cursor: pointer; }今回はWeb制作で実用的なスライドショーについてまとめました。
上記でまとめたスライドショー以外にも、多種多様なスライドショーがまだまだあります。
自分の制作物に合うスライドショーを見つけて、制作の幅を増やしましょう。
