jQueryプラグイン「infiniteSlide.js」で文字を無限スクロール。

URLをコピーしました！

案件で、セクションの背景で文字を左から右に無限スクロールさせるアニメーションを実装する必要があったのでメモ。

最初CSSだけでやっていたのだけど、細かい調整やアニメーションが途切れるのが気になったので今回プラグインを使用したら、嘘のように簡単に実装できました。

今後も使うかもしれないのでメモ。

CSSだけの無限スクロール

最初に試したのがこれらの記事の実装方法。

前回は画像だったので、これで問題なかった。

きっかけブログ

【CSS】画像を無限横スクロールさせる方法 | YUJIRO BLOG

iwb.jp

CSSだけでmarqueeのような無限スクロールを実装する方法

夢みるゴリラ

【CSSだけ】画像が横に流れ続ける無限ループの作り方 – IE11対応済み今回はCSSだけで画像が横に流れる無限ループの作り方を紹介します。デモサイトを作成したので、表示を確認してみてください。デモサイト前提条件は以下画像を左方向と、右…

だけど今回は文字を無限スクロールさせる必要があり、しかもレスポンシブで文字サイズが可変だったため、調整に時間がかかってしまった。

今回そこまで時間をかけてられないので、今回はjQueryのプラグインの使用を検討。

jQueryプラグインを使用した文字の無限スクロール

slick.jsでの実装方法もあったけど、今回はこちらのプラグイン「infiniteSlide.js」を使用。

ちなみにslick.jsの方法はこちら。

じゅんぺいブログ

【slick】横方向に流れ続ける無限ループスライダーを作る方法スライダー系プラグインslickで横方向に流れ続ける無限ループスライダーの作り方をコードとデモを使って解説します。またオプションを使えば逆方向にすることも可能です。…

「infiniteSlide.js」を紹介した記事はこちら。

SHU BLOG

【jQuery】画像を「無限ループ」させよう、infiniteslidev2の使い方!! infiniteslidev2のダウンロードから設定の方法、デモサイトもご用意しております。

デザイン初心者学習サイトビギナ…

コンテンツを無限スクロールさせるjQueryプラグイン「infiniteSlide.js」が便利コンテンツや画像を無限スクロールさせるjQueryプラグイン「infiniteSlide.js」が久しぶりに使ってみても便利だったので、自分の備忘録も兼ねて記事にしてみました。導入…

今回初めて使ったのだけど、あっという間に文字の無限スクロールが実装できた。

コンテンツのクローンを作る個数、スライドのスピードなどを簡単に設定できるからものすごい簡単でおすすめ。

infiniteSlide.jsを使用した実際のコード

<div class="infiniteslide">
   <ul>
       <li class="infiniteslide__item">ここに文章が入ります。</li>
   </ul>    
</div>

$(function() {
    // 背景文字の無限ループ
    $('.infiniteslide').infiniteslide({
        'speed': 10, // スピード 1分に何px移動するかを指定
        'direction': 'left', //方向 up/down/left/right
        'pauseonhover': false, //マウスを当てたら、スライドが止まるかどうか
        'responsive': true, //レスポンシブ対応　ウィンドウのサイズ変更時の幅/高さの再計算。 子要素の幅/高さは %/vw/vh を定義します。
        'clone': 100 //要素のクローン数 無限ループする際に必要。子要素が少なすぎる場合 (要素を「無限」にすることはできません)
});

よかったらシェアしてね！