Posted at

cssのみで作る自動無限スクロールスライド

同じスライドを2つ並べている。一つ目のスライドはスライドが画面に表示されている状態から、画面から消えるまでスクロールする。二つ目は画面の外(ギリギリ見えない状態)から、一つ目のスライドの最初の状態までスクロールする。二つのスライドをこのように動かすことで無限ループに見せている。


html.html

<div class="infinity-slide">

<!-- 同じスライドを二つ表示 -->
<div id="slide">
<div id="block" style="height:120px; background:black; width:210px;"></div>
<div id="block" style="height:100px; background:gray; width:180px;"></div>
<div id="block" style="height:100px; background:pink; width:150px;"></div>
</div>
<div id="slide">
<div id="block" style="height:120px; background:black; width:210px;"></div>
<div id="block" style="height:100px; background:gray; width:180px;"></div>
<div id="block" style="height:100px; background:pink; width:150px;"></div>
</div>
</div>


css.css

.infinity-slide{

display: flex; /* 二つのスライドを横に並べる */
width: auto;
overflow: hidden;
}

#slide {
animation: infinity-loop 30s infinite linear 1s both; /* 無限ループアニメーションの設定 */
display: flex; /* スライドの要素を横に並べる */
height: 100px; /* スライドの高さ */
position: relative;
}

#slide #block{
height: 100%;
width: auto
}

/* 無限ループアニメーション */
@keyframes infinity-loop {
from {
transform: translateX(0vw);
}
to {
transform: translateX(-100%);
}
}


demo: https://codepen.io/mk668a/pen/ReGxKR


要素の部分が画像の場合


html.html

<div class="infinity-slide">

<!-- 同じスライドを二つ表示 -->
<div id="slide">
<img src="https://cdn.pixabay.com/photo/2018/04/28/22/03/dawn-3358468_1280.jpg" />
<img src="https://cdn.pixabay.com/photo/2018/09/14/22/51/cobblestones-3678292_1280.jpg" />
<img src="https://cdn.pixabay.com/photo/2018/06/29/22/45/wheat-3506758_1280.jpg" />
</div>
<div id="slide">
<img src="https://cdn.pixabay.com/photo/2018/04/28/22/03/dawn-3358468_1280.jpg" />
<img src="https://cdn.pixabay.com/photo/2018/09/14/22/51/cobblestones-3678292_1280.jpg" />
<img src="https://cdn.pixabay.com/photo/2018/06/29/22/45/wheat-3506758_1280.jpg" />
</div>
</div>


css.css

.infinity-slide{

display: flex; /* 二つのスライドを横に並べる */
width: auto;
overflow: hidden;
}

#slide {
animation: infinity-loop 30s infinite linear 1s both; /* 無限ループアニメーションの設定 */
display: flex; /* スライドの要素を横に並べる */
height: 100px; /* スライドの高さ */
position: relative;
}

/* #blockからimgに変えた */
#slide img{
height: 100%;
width: auto
}

/* 無限ループアニメーション */
@keyframes infinity-loop {
from {
transform: translateX(0vw);
}
to {
transform: translateX(-100%);
}
}


demo: https://codepen.io/mk668a/pen/pxEppO

他にいい案があれば教えていただきたいですねええええ