v2 エフェクト
BgEffectSteam
湯気が立ち上るエフェクト。温泉・カフェ・ラーメン・温かみのある演出に。
PREVIEW
デモ
概要
白い煙・湯気が下から上に向かってゆっくり揺れながら上昇するエフェクトです。温泉・スパ・カフェ・料理サイトなど、温かみや安らぎを表現したいページに特に映えます。--steam-theme: light で白背景にも対応します。
CSS カスタム変数
| 変数名 | デフォルト | 説明 |
|---|---|---|
--steam-count |
18 |
最大粒子数 |
--steam-alpha |
1.0 |
アルファ係数 |
--steam-hue |
210 |
煙の色相（0〜360）。210 で青白系 |
--steam-theme |
'dark' |
テーマ。'dark' または 'light' |
使用例
セクションへの適用
sections:
- template: hero
title: "タイトル"
effects:
- BgEffectSteam
ページ全体への適用
---
layout: layouts/base.njk
effects:
- BgEffectSteam
---
CSS 変数での調整
:root {
--steam-count: 12;
--steam-alpha: 0.75;
--steam-hue: 30; /* 暖色系の湯気 */
--steam-theme: dark;
}