ウェブサイトの背景にアンビエントな雲を追加するライブラリ

background-clouds background-cloudsは、ウェブサイトの背後に軽量でアニメーションするローポリの雲のバンクを追加します。単一のキャンバスを使用し、ランタイム依存がなく、ユーザーがreduced motionを好む場合はアニメーションを一時停止し、シングルページアプリケーション（SPA）向けのライフサイクルメソッドを公開しています。 インストール ``` npm install background-clouds ``` 使用法 ```javascript import { createCloudBackground } from "background-clouds"; const clouds = createCloudBackground({ canvas: document.querySelector("#background-clouds"), seed: "my-site", speed: 0.8, opacity: 0.9 }); // 後で、例えばルートのアンマウント時など: clouds.destroy(); ``` ```html <canvas id="background-clouds" aria-hidden="true"></canvas> ``` ```css #background-clouds { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; } ``` `createCloudBackground`を呼び出す前にキャンバスが利用可能である必要があります。返されるコントローラーには、start()、stop()、resize()、setSeed(seed)、およびdestroy()メソッドがあります。 seedは文字列または数値にできます。同じseedを使用すると、同じ雲のレイアウトが生成されます。speedとopacityはデフォルトで1であり、非負の数を受け入れます。 オプション | Option | Default | Description | |-------------|---------|------------------------------------------------------------------------------| | canvas | required| レンダリング先の<canvas>要素。 | | seed | random | 決定論的な雲の配置のための安定した文字列または数値。 | | speed | 1 | 移動速度の乗数。0に設定すると雲は静止します。 | | opacity | 1 | 全体的な雲の不透明度乗数。 | | pixelRatio | 2 | レンダリングに使用される最大デバイスピクセル比。 | | reducedMotion| media query| prefers-reduced-motionを明示的にオーバーライドするために設定します。 | このパッケージはキャンバスのピクセルのみを所有します。サイトのCSSでキャンバスのスタッキング順序、背景色、および配置を設定してください。