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

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

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

DEMOと使い方
Github

AD

特徴

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

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

作成の動機など

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

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

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

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

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

AD

Share

Commentsコメント

メールアドレスは公開されません。コメントは必ずご入力ください。

HTMLタグは使用できません。ソースコードを書き込みたい場合はCodetterGistCodePenなどのご利用が便利です。

Dereck さんより
Hi, what great code, "infiniteslidev2". I would like to use your code on a schoold web site I am trying to write. I have a table containing a dynamic amount of rows. Using your code I am able to have the rows auto scroll, which is great.

The div the table sits in is 700pc high. If I manually refresh the browser the div high gets changed to a smaller size. If I inspect the code I see ""

As you can see the height has changed to 102px. Would you know why this is happening.

Many thanks in advance.
dereck
WebMaster さんより
Hi Dereck.
Thank you for using "infiniteslidev2".

Please tell me what writing your HTML, Please ?