背景を無限にスクロールさせたり、例えば何かのイベントでスポンサー様方のロゴをスクロールで表示させたりしなければいけない場合があるかと思います。
そういった時に、以下方法で実際に実装しました。
1.CSSで無限スクロールさせる方法
1枚の画像を無限に横のリピートスクロールさせるだけならこの方法で十分です。
.loop {
width: 100%;
height: 200px; /*画像の高さ等*/
background: url(loop.jpg) repeat-x;
background-position: center;
animation: bgloop 30s linear infinite; /*秒数等はお好きな数値に、infiniteは残す*/
}
@keyframes bgloop {
from {
background-position: 0 0;
}
to {
background-position: -1000px 0; /*-1000px部分は画像の横幅と同じ数値*/
}
}
2.複数の画像やリストを縦や横に無限スクロールさせる方法
複数の画像群（サイズ不ぞろいでも可）とか、リストで囲まれた例えばスポンサー様方のロゴなどを縦や横（主に横だとは思いますが）に、無限にスクロールさせる方法です。
jQueryプラグイン（infiniteslidev2）を使います。これ、とっても素晴らしいです。
愛用のbxslider様のティッカーモードでなんとかならないか試行錯誤しましたが、どうにもならないとき、infiniteslidev2が助けてくれました。
以下のように設定します。縦スクロールや、デフォルトは右から左へ流れますが、左から右にもいけたり、スクロールスピードも変えれます。詳しくはGithubへ。
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="infiniteslidev2.js"></script>
<script>
$(function(){
$('.js-loop').infiniteslide();
});
</script>
<div class="js-loop">
<ul>
<li><img src="loop__img--1.jpg"></li>
<li><img src="loop__img--2.jpg"></li>
<li><img src="loop__img--3.jpg"></li>
</ul>
</div>
