2021・06・25
＊画像が動きながらスライドしていくサンプルです（CSSのみ使用）＊
画像スライダーは通常、JavaScriptやそのライブラリで実装することが多いですが、CSSのみで実装してみました。
主に、background-image・size・positionプロパティの組み合わせと、opacity、animationプロパティを活用しています。
まず、background-sizeを要素よりも大きな数値に指定して、次にbackground-positionで位置を移動させることで、「要素からはみ出ずに画像が動く」というアニメーションを作り出しています。
画像が表示されない間はopacityの値が０をキープするようにしておき、画像が切り替わるタイミングでopactyの値を変化させることで、フェードイン・アウトを表現しています。
用語解説：opacityプロパティ
サンプルでは、10秒間の間に３枚の画像が切り替わるように、animationプロパティの値とキーフレームを調整しています。
主な使用機能：CSS
上記のサンプルコードを掲載しています。学習用としてご自由にコピペしてお使い下さい。（※スクロールできます）
HTML・CSS
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.moveslider_box {
position :relative;
z-index: 1;
width: 100%;
height: 400px;
outline: dotted 3px darkblue;
outline-offset: 3px;
display :flex;
align-items: center;
text-align: center;
}
.moveslider1 {
display :flex;
align-items: center;
justify-content: center;
position :absolute ;
top:0;
opacity :0;
transition : .5s;
font-family: '游ゴシック体',sans-serif;
font-size:2rem;
color :white;
background-image: url(https://web-de-asobo.net/wp-content/uploads/2021/06/aozora.jpg);
width: 100%;
height: 100%;
background-size: 100vw 800px;
background-position: center 0px;
background-repeat :no-repeat;
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
animation: move1 10s linear 0s infinite normal;
}
@keyframes move1 {
25% {background-position : center -40px ; opacity: .8}
50% {background-position : center -80px ; opacity: .0}
75% {background-position : center -80px ; opacity: .0}
100% {background-position : center -80px ; opacity :0;}
}
.moveslider2 {
display :flex;
align-items: center;
justify-content: center;
position :absolute ;
top: 0;
opacity :0;
transition : .5s;
font-family: '游ゴシック体',sans-serif;
font-size:2rem;
color :white;
background-image: url(https://web-de-asobo.net/wp-content/uploads/2021/06/yuuyake.jpg);
width: 100%;
height: 100%;
background-size: 100vw 800px;
background-position: center -40px;
background-repeat :no-repeat;
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
animation: move2 10s linear .5s infinite normal;
}
@keyframes move2 {
25% {background-position : 0 -40px ; opacity: 0;}
50% {background-position : 0 -80px ; opacity: .8}
75% {background-position : 0 -120px ; opacity: .4}
100% {background-position : 0 -120px ; opacity :0;}
}
.moveslider3 {
display :flex;
align-items: center;
justify-content: center;
position :absolute ;
top: 0;
opacity :0;
transition : .5s;
font-family: '游ゴシック体',sans-serif;
font-size:2rem;
color :white;
background-image: url(https://web-de-asobo.net/wp-content/uploads/2021/06/yoruzora.jpg);
width: 100%;;
height: 100%;
background-size: 100vw 800px;
background-position: center top 40%;
background-repeat :no-repeat;
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
animation: move3 10s linear 1.5s infinite normal;
}
@keyframes move3 {
25% {background-position : center top 40% ; opacity: 0;}
50% {background-position : center top 50% ; opacity: .0;}
75% {background-position : center top 60% ; opacity: .8;}
85% {background-position : center top 65% ; opacity: .6;}
100% {background-position : center top 70% ; opacity :.0;}
}
.moveslider_box p {
mix-blend-mode: soft-light;
font-weight :bold;
}
.moveslider4 {
background-image: repeating-linear-gradient(rgb(156, 179, 213), rgb(156, 179, 213) 1%, white 1%, white 2%);
width :100%;
height: 100%;
position :absolute;
clip-path: polygon(0% 0%, 25% 0%, 0% 100% );
}
.moveslider5 {
background-image: repeating-linear-gradient(rgb(156, 179, 213), rgb(156, 179, 213) 1%, white 1%, white 2%);
width :100%;
height: 100%;
position :absolute;
clip-path: polygon(100% 0%,100% 100%,75% 100%);
}
@media screen and (max-width:800px) {
.moveslider_box {
height: 200px;
}
.moveslider_box div {
background-size: 100vw 400px;
font-size: 1.2rem;
}
}
</style>
<body>
<div class="moveslider_box">
<div class="moveslider1"><p>遊びながら<br>Web制作を学べるサイト</p></div>
<div class="moveslider2"><p>遊びながら<br>Web制作を学べるサイト</p></div>
<div class="moveslider3"><p>遊びながら<br>Web制作を学べるサイト</p></div>
<div class="moveslider4"></div>
<div class="moveslider5"></div>
</div>
</body>
</html>