v2 エフェクト
BgEffectStarSpeed
星が中心から外側に高速で流れるワープ演出エフェクト。SF・スピード感・テクノロジー系に。
PREVIEW
デモ
概要
画面中心から外側に向かって高速で飛んでいく光の線（ストリーク）がワープ・ワームホールの演出を作り出すエフェクトです。--star-speed-velocity で流れる速さを調整できます。SF・ゲーミング・ハイテク系のページに強烈なインパクトを与えます。--star-speed-invert: 1 で白背景モードにも対応します。
CSS カスタム変数
| 変数名 | デフォルト | 説明 |
|---|---|---|
--star-speed-count |
120 |
星の数 |
--star-speed-alpha |
1.0 |
アルファ係数 |
--star-speed-velocity |
0.12 |
飛行速度の係数。大きいほど速い |
--star-speed-invert |
'0' |
白背景モード（'1' で有効） |
使用例
セクションへの適用
sections:
- template: hero
title: "タイトル"
effects:
- BgEffectStarSpeed
ページ全体への適用
---
layout: layouts/base.njk
effects:
- BgEffectStarSpeed
---
CSS 変数での調整
:root {
--star-speed-count: 200;
--star-speed-alpha: 0.9;
--star-speed-velocity: 0.20; /* 高速ワープ */
}