Nuxt Marquee

CSSアニメーションを活用した、滑らかなマーキース効果を実現する軽量Nuxt 3コンポーネントです。

nuxt-marquee

インストール

npx nuxi@latest module add marquee

このモジュールを使用するには、`nuxt.config.ts`ファイルの`modules`セクションに追加します。

export default defineNuxtConfig({
  // ..
  modules: ["nuxt-marquee"],
});

<template>
  <NuxtMarquee>
    <MyComponent />
    <MyComponent />
    <MyComponent />
  </NuxtMarquee>
</template>

プロパティ名	型	デフォルト値	説明
`style`	`CSSProperties`	`{}`	コンテナdivのインラインスタイル
`class`	`any`	`""`	コンテナdivをスタイルするためのCSSクラス名
`autoFill`	`boolean`	`false`	マーキースの空白スペースを子要素のコピーで自動的に埋めるかどうか
`play`	`boolean`	`true`	マーキースを再生または一時停止するかどうか
`pauseOnHover`	`boolean`	`false`	ホバー時にマーキースを一時停止するかどうか
`pauseOnClick`	`boolean`	`false`	クリック時にマーキースを一時停止するかどうか
`direction`	`"left" \| "right"\| "up"\| "down"`	`"left"`	マーキースのスライド方向警告: 垂直方向のマーキースは現在実験段階であり、バグが発生する可能性があります。設定する際は、マーキースの高さ（height）と幅（width）の値を入れ替えてください。
`speed`	`number`	`50`	ピクセル/秒で計算された速度
`delay`	`number`	`0`	レンダリング後のアニメーションの遅延時間（秒）
`loop`	`number`	`0`	マーキースのループ回数。0は無限ループに相当します。
`gradient`	`boolean`	`false`	グラデーションを表示するかどうか
`gradientColor`	`string`	`white`	グラデーションの色
`gradientWidth`	`number \| string`	`200`	左右両側のグラデーションの幅

イベント名	説明
`finish`	マーキースのスクロールが完了して停止したときに発生します。loopが0以外の場合のみ呼び出されます。
`cycleComplete`	マーキースが1ループ完了したときに発生します。最大ループ回数に達した場合（onFinishを使用）は呼び出されません。

MIT - Hànzyによって作成されました 💙