v2 エフェクト
BgEffectSnow
白い雪がゆっくり降り積もるエフェクト。冬・クリスマス・北欧系サイトに。
PREVIEW
デモ
概要
丸い雪の粒子がゆっくり揺れながら落下するエフェクトです。最もよく使われる背景エフェクトの一つで、CSS 変数と YAML パラメーターの両方に対応しています。hue を指定することで白以外の色付き雪にすることもできます。
CSS カスタム変数
| 変数名 | デフォルト | 説明 |
|---|---|---|
--snow-count |
60 |
粒子数 |
--snow-alpha |
1.0 |
明るさ係数 |
--snow-hue |
未設定 | 色相（0〜360）。未設定で白/青白 |
--snow-lightness |
70 |
明度（0〜100）。hue 設定時のみ有効 |
YAML パラメーター（セクション適用時）
| パラメーター | デフォルト | 説明 |
|---|---|---|
count |
60 |
粒子数（推奨: 20〜200） |
alpha |
1.0 |
明るさ係数（推奨: 0.5〜1.5） |
hue |
未設定 | 色相 0〜360（未設定で白/青白） |
lightness |
70 |
明度 0〜100（hue 設定時のみ有効） |
使用例
セクションへの適用（オプションなし）
sections:
- template: hero
title: "タイトル"
effects:
- BgEffectSnow
セクションへの適用（オプションあり）
sections:
- template: hero
title: "タイトル"
effects:
- name: BgEffectSnow
count: 30
alpha: 1.2
hue: 210
lightness: 80
ページ全体への適用
---
layout: layouts/base.njk
effects:
- BgEffectSnow
---
CSS 変数での調整
:root {
--snow-count: 100;
--snow-alpha: 0.9;
}