1. ryo2132

    Posted

    ryo2132
Changes in title
+CSSだけでよくある無限ループの画像ギャラリーを作ってみる
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,43 @@
+今作っているwebサイトで、コンテンツの一つとして無限ループの画像ギャラリーを使いたかったので、作って見ました。
+今までこういうものはJSで作るものだと思っていたのですが、以外にCSSだけで出来ました。CSSは奥が深い。
+
+# DEMO
+
+<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="kawamataryo-the-sans" data-slug-hash="JxLEjO" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="css-infinite-slider">
+ <span>See the Pen <a href="https://codepen.io/kawamataryo-the-sans/pen/JxLEjO/">
+ css-infinite-slider</a> by kawamata@元🚒エンジニア (<a href="https://codepen.io/kawamataryo-the-sans">@kawamataryo-the-sans</a>)
+ on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+
+# ポイント解説
+
+### 画像の配置とダブリ
+違和感なくループするように、6枚の画像をスクロールさせたい場合、1,2,3番目の画像と同様のものを7,8,9番目に配置することです。
+ダブリの画像を入れることで、切れ目なくループしているように見えます。
+
+```stylus
+ .item-1
+ background-image url(https://picsum.photos/400/300?image=101)
+ .item-2
+ background-image url(https://picsum.photos/400/300?image=102)
+ .item-3
+ background-image url(https://picsum.photos/400/300?image=103)
+ .item-4
+ background-image url(https://picsum.photos/400/300?image=104)
+ .item-5
+ background-image url(https://picsum.photos/400/300?image=106)
+ .item-6
+ background-image url(https://picsum.photos/400/300?image=107)
+ .item-7
+ background-image url(https://picsum.photos/400/300?image=101) // item-1と同様
+ .item-8
+ background-image url(https://picsum.photos/400/300?image=102) // item-2と同様
+ .item-9
+ background-image url(https://picsum.photos/400/300?image=103) // item-3と同様
+
+```
+
+# 参考
+ほぼこちらの丸々使わせてもらいました。
+https://css-tricks.com/infinite-all-css-scrolling-slideshow/