- 最終更新日
- 記事公開日
【CSSアニメーション】２つ重ねた画像を両方ともスライドショー
この前、２つの画像フレームが少しだけ重なるようなレイアウトにフェードエフェクトを付けるCSSアニメーションを教えてもらったんだけど、別の方法を思い付いたの。
今度は、フレームの中の写真が次々にスライドショーで切り替わるようにしたいんだけど、どうすればいい？
了解です！
こちらになります↓
/* -----------------------------------------------------
フレーム
----------------------------------------------------- */
#flame {
width:640px;
height:480px;
background:#eee;
position:relative;
}
#lf {
position:absolute;
top:0;
left:0;
z-index:30;
width:70%; /* 448px */
height:62.3%; /* 299px */
overflow:hidden;
}
#rf {
position:absolute;
bottom:0;
right:0;
z-index:20;
width:59.9%; /* 384px */
height:53.3%; /* 256px */
overflow:hidden;
}
/* -----------------------------------------------------
アニメーション（左）画像3枚
----------------------------------------------------- */
.lf_slide {
display:flex;
width:100%;
list-style-type:none;
margin:0;
padding:0;
}
.lf_slide li {
width:100%;
}
.lf_slide li img {
height:100%;
vertical-align:bottom;
}
.lf_slide img {
animation-name:lfmt;
animation-duration:8s;
animation-delay:0s;
animation-timing-function:ease-in;
animation-iteration-count:infinite;
}
@keyframes lfmt {
0% {
margin-left:0;
}
28% {
margin-left:0;
}
33% {
margin-left:-100%;
}
61% {
margin-left:-100%;
}
66% {
margin-left:-200%;
}
95% {
margin-left:-200%;
}
100% {
margin-left:-300%;
}
}
/* -----------------------------------------------------
アニメーション（右）画像2枚
----------------------------------------------------- */
.rf_slide {
display:flex;
width:100%;
list-style-type:none;
margin:0;
padding:0;
}
.rf_slide li {
width:100%;
}
.rf_slide li img {
height:100%;
vertical-align:bottom;
}
.rf_slide img {
animation-name:rfmt;
animation-duration:8s;
animation-delay:0s;
animation-timing-function:ease-in;
animation-iteration-count:infinite;
}
@keyframes rfmt {
0% {
margin-left:0;
}
45% {
margin-left:0;
}
50% {
margin-left:-100%;
}
95% {
margin-left:-100%;
}
100% {
margin-left:-200%;
}
}<html>
<body>
<div id="flame">
<!-- 左フレーム -->
<ul id="lf" class="lf_slide">
<li><img src="./image/momo.jpg"></li>
<li><img src="./image/muscat.jpg"></li>
<li><img src="./image/nasi.jpg"></li>
<li><img src="./image/momo.jpg"></li>
</ul>
<!-- 右フレーム -->
<ul id="rf" class="rf_slide">
<li><img src="./image/melon.jpg"></li>
<li><img src="./image/pine.jpg"></li>
<li><img src="./image/melon.jpg"></li>
</ul>
</div>
</body>
</html>※エフェクトの関係上、最後の画像は一枚目と同じ画像を差し込む必要があるのでご注意ください。
画像を横一列に並べて置き、アニメーションで一枚ずつズラして表示する仕組みです。
デバッグの際は「overflow:hidden」を削除してみると、構造が理解しやすいかと思います。
