画像などの要素を無限に縦や横にスクロールさせる方法

背景を無限にスクロールさせたり、例えば何かのイベントでスポンサー様方のロゴをスクロールで表示させたりしなければいけない場合があるかと思います。

そういった時に、以下方法で実際に実装しました。

1.CSSで無限スクロールさせる方法

1枚の画像を無限に横のリピートスクロールさせるだけならこの方法で十分です。

2.複数の画像やリストを縦や横に無限スクロールさせる方法

複数の画像群(サイズ不ぞろいでも可)とか、リストで囲まれた例えばスポンサー様方のロゴなどを縦や横(主に横だとは思いますが)に、無限にスクロールさせる方法です。

jQueryプラグイン(infiniteslidev2)を使います。これ、とっても素晴らしいです。

愛用のbxslider様のティッカーモードでなんとかならないか試行錯誤しましたが、どうにもならないとき、infiniteslidev2が助けてくれました。

以下のように設定します。縦スクロールや、デフォルトは右から左へ流れますが、左から右にもいけたり、スクロールスピードも変えれます。詳しくはGithubへ。