今回は、CSSで画像を無限横スクロールさせる方法についてまとめました。
Webページのfooter付近に配置されているスポンサー企業のアイコン画像でよく実装されています。
【CSS】画像を無限横スクロールさせる方法
デモサイトはこちら。
See the Pen
Untitled by ゆーじろー (@yuji64)
on CodePen.
HTML
<div class="scroll">
<ul class="scroll-list">
<li>
<img src="https://yujiromx.com/wp-content/uploads/2022/06/icon_113280_256.png" alt="">
</li>
<li>
<img src="https://yujiromx.com/wp-content/uploads/2022/06/icon_113240_256.png" alt="">
</li>
<li>
<img src="https://yujiromx.com/wp-content/uploads/2022/06/icon_113230_256.png" alt="">
</li>
<li>
<img src="https://yujiromx.com/wp-content/uploads/2022/06/icon_113150_256.png" alt="">
</li>
<li>
<img src="https://yujiromx.com/wp-content/uploads/2022/06/icon_113120_256.png" alt="">
</li>
</ul>
<ul class="scroll-list">
<li>
<img src="https://yujiromx.com/wp-content/uploads/2022/06/icon_113280_256.png" alt="">
</li>
<li>
<img src="https://yujiromx.com/wp-content/uploads/2022/06/icon_113240_256.png" alt="">
</li>
<li>
<img src="https://yujiromx.com/wp-content/uploads/2022/06/icon_113230_256.png" alt="">
</li>
<li>
<img src="https://yujiromx.com/wp-content/uploads/2022/06/icon_113150_256.png" alt="">
</li>
<li>
<img src="https://yujiromx.com/wp-content/uploads/2022/06/icon_113120_256.png" alt="">
</li>
</ul>
</div>
親要素scrollの中に子要素scroll-listを入れ子にします。
scroll-listを2つ用意した理由は、横スクロールした際に画像が途中で途切れないようにするためです。
CSS
@keyframes loop {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
.scroll {
margin: 20px;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 180px;
overflow-y: hidden;
border: 2px solid;
padding: 30px;
max-width: 500px;
}
.scroll-list {
display: flex;
align-items: center;
animation: loop infinite linear 10s both;
li {
min-width: 150px;
}
}
無限横スクロールにするポイントは、親要素scrollをoverflow-y: hidden;ではみ出した画像を非表示にし、画像を横並びにします。
そしてkeframesで指定したCSSアニメーションで無限スクロールさせたらOKです。
あと画像の幅が指定されていないとスクロールが途中で切れたりするので、画像の幅も指定しておくと良いでしょう。
まとめ
以上が、CSSで画像を無限横スクロールさせる方法でした。
