同じスライドを2つ並べている。一つ目のスライドはスライドが画面に表示されている状態から、画面から消えるまでスクロールする。二つ目は画面の外(ギリギリ見えない状態)から、一つ目のスライドの最初の状態までスクロールする。二つのスライドをこのように動かすことで無限ループに見せている。
DEMO
See the Pen infinite scroll by mk668a (@mk668a) on CodePen.
CODE
index.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" />
<img src="https://cdn.pixabay.com/photo/2017/01/20/00/30/maldives-1993704_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" />
<img src="https://cdn.pixabay.com/photo/2017/01/20/00/30/maldives-1993704_1280.jpg">
</div>
</div>
style.css
.infinity-slide{
display: flex; /* 二つのスライドを横に並べる */
width: 50vw;
margin: 0 25vw;
background: gray;
overflow: hidden;
}
# slide {
animation: infinity-loop 10s infinite linear 1s both; /* 無限ループアニメーションの設定 */
display: flex; /* スライドの要素を横に並べる */
width: 50vw;
height: 100px;
position: relative;
}
# slide img{
height: 100%;
width: auto;
}
/* 無限ループアニメーション */
@keyframes infinity-loop {
from {
transform: translateX(0vw);
}
to {
transform: translateX(-50vw);
}
}
他にいい案があれば教えていただきたいですねええええ