showloop

Demo

• デザインの例: https://codepen.io/qrac/full/LYrPXjJ
• オプションの例: https://codepen.io/qrac/pen/OJELabK

About

任意のコンテンツをループスライドさせる 3KB のシンプルな JavaScript ライブラリ。ウェブデザインの装飾を想定しています。

• ループ要素の種類 / サイズ / 数に制限なし
• ターゲット要素のリサイズに合わせて自動調整
• 横方向 / 縦方向 / 各逆ループ / 速度調整に対応
• px/sec ベースの直感的なスピード指定

How To Use

HTML

HTML に data-showloop・data-showloop-slide・data-showloop-items を付与して、<!-- ADD CONTENTS --> にループさせたいコンテンツを入れます。コンテンツは複数でも構いません。

<div data-showloop>
  <div data-showloop-slide>
    <div data-showloop-items>
      <!-- ADD CONTENTS -->
    </div>
  </div>
</div>

JavaScript

CDN または npm から JavaScript を読み込みます。

UMD

<script src="https://cdn.jsdelivr.net/npm/showloop@0.1.2/dist/showloop.js"></script>
<script>showloop()</script>

ESM

<script type="module">
  import showloop from "https://cdn.jsdelivr.net/npm/showloop@0.1.2/dist/showloop.esm.js"
  showloop()
</script>

import showloop from "showloop"

showloop()

Options

オプションは初期化関数に showloop({key: value}) 形式で使うか、または各 HTML に data-showloop='{ "key": "value" }' 形式で渡せます。HTML の場合、key をダブルクォーテーションで囲まないと内部処理の JSON.parse() が失敗してエラーになります。

Option	Type	Default
axis	"X" or "Y"	"X"
direction	"normal" or "reverse"	"normal"
speed	number	50
targetSelector	string	"[data-showloop]"
useLimit	boolean	true
debounce	number	200
respectReducedMotion	boolean	false

axis

"X" だと横方向 "Y" だと縦方向に要素をループスライドさせます。

direction

"normal" だと通常 "reverse" だと逆方向に要素をループスライドさせます。

speed

data-showloop-items 内の要素の移動速度を px/sec（1秒あたりの移動ピクセル数）で指定します。

targetSelector

[data-showloop] とは別にターゲットを設定できます。1 画面で異なるオプションの初期化関数を複数使いたい場合に使います。

<div class="test1" data-showloop>...</div>
<div class="test2" data-showloop>...</div>

<script type="module">
  import showloop from "./showloop.esm.js"

  showloop({
    targetSelector: ".test1",
    speed: 1000,
  })
  showloop({
    targetSelector: ".test2",
    speed: 2000,
  })
</script>

useLimit (⚠️danger)

デフォルト true ではループ要素を複製する限界が設定されており、複製が存在する状態だと画面幅の 2 倍以上は増えません。使用上、このリミッターを外したい場合のみ false にします。

※注意するべきは縦ループです。ウェブは基本的に縦幅の制約が無いため、リミッターを外した状態で height または max-height に値がない要素内をループさせると、縦幅の計算と複製が無限ループしてブラウザがクラッシュします。

debounce

リサイズ時の再計算を遅延させるミリ秒数

respectReducedMotion

true にすると prefers-reduced-motion: reduce が有効な環境ではアニメーションを停止します。

License

• MIT

Credit

• Author: Qrac
• Organization: QRANOKO