【Javascript】CSS3アニメーションによる無限スクロールを実装するjQueryプラグイン「infiniteslide.js v2」を作成しました | Wood-Roots:blog

継ぎ目のない無限スクロールをCSS3アニメーションで簡単に実装するjQueryプラグイン「infiniteslide.js v2」を作成しました。

約4年前に作成した「infiniteslide.js」を刷新したバージョンです。

DEMOと使い方
Github

特徴

スクロールさせる要素は画像でもdivでも何でもよく、設置方法も非常に簡単です。

レイアウト制御にflexboxを使用し、アニメーションはCSS3（@keyframe）アニメーションを使用しています。
そのためCSSによる柔軟なカスタマイズを行うことができ、アニメーションの動作についてもjQueryのanimate()以上に滑らかです。

作成の動機など

無限スクロールが少し流行りの兆しがあるようで（最近では魔女の宅急便ですね）、私のinfiniteslide.jsをご利用いただいている事例も時折見かけます。

この無限スクロールをjQueryのanimate()によって実装した場合、CSSアニメーション全盛の昨今ではガタツキが目立ちます。CSSで実装することがベストですが、都度@keyframeを書くのは大変です。

そこで設置も簡単でどんな要素にも対応するシンプルかつ汎用性の高いものを、というところを目指して作成しました。

jQueryプラグインではありますが、アニメーション自体は@keyframeによるものですので滑らかで安定しています（多分…）。

拙い部分もあると思いますが、使えそうでしたらご利用ください。
不具合方向や要望などがありましたら、ブログのコメント欄やGithubのIssueなどにお願いします。