Simple JavaScript library for loop-sliding showcase
npm install showloop- デザインの例: https://codepen.io/qrac/full/LYrPXjJ
- オプションの例: https://codepen.io/qrac/pen/OJELabK
任意のコンテンツをループスライドさせる 3KB のシンプルな JavaScript ライブラリ。ウェブデザインの装飾を想定しています。
- ループ要素の種類 / サイズ / 数に制限なし
- ターゲット要素のリサイズに合わせて自動調整
- 横方向 / 縦方向 / 各逆ループ / 速度調整に対応
- px/sec ベースの直感的なスピード指定
HTML に data-showloop・data-showloop-slide・data-showloop-items を付与して、 にループさせたいコンテンツを入れます。コンテンツは複数でも構いません。
``html`
CDN または npm から JavaScript を読み込みます。
#### UMD
`html`
#### ESM
`html`
`ts
import showloop from "showloop"
showloop()
`
オプションは初期化関数に 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 |
"X" だと横方向 "Y" だと縦方向に要素をループスライドさせます。
"normal" だと通常 "reverse" だと逆方向に要素をループスライドさせます。
data-showloop-items 内の要素の移動速度を px/sec（1秒あたりの移動ピクセル数）で指定します。
[data-showloop] とは別にターゲットを設定できます。1 画面で異なるオプションの初期化関数を複数使いたい場合に使います。
`html......
`
デフォルト true ではループ要素を複製する限界が設定されており、複製が存在する状態だと画面幅の 2 倍以上は増えません。使用上、このリミッターを外したい場合のみ false にします。
※注意するべきは縦ループです。ウェブは基本的に縦幅の制約が無いため、リミッターを外した状態で height または max-height に値がない要素内をループさせると、縦幅の計算と複製が無限ループしてブラウザがクラッシュします。
リサイズ時の再計算を遅延させるミリ秒数
true にすると prefers-reduced-motion: reduce` が有効な環境ではアニメーションを停止します。
- MIT