v2 エフェクト

BgEffectEmber

炎の火の粉(エンバー)が上方向に漂うエフェクト。情熱・夏祭り・工業系の演出に。

PREVIEW

← v2 エフェクト一覧


デモ


概要

小さな光の粒子が揺らぎながら上昇するエフェクトです。焚き火や炉の火の粉を模しており、情熱的・エネルギッシュな印象を与えます。--ember-theme: light で明るい背景にも対応します。


CSS カスタム変数

変数名 デフォルト 説明
--ember-count 40 最大粒子数
--ember-alpha 1.0 アルファ係数
--ember-hue 28 粒子の基本色相(0〜360)。28 でオレンジ系
--ember-theme 'dark' テーマ。'dark' または 'light'

使用例

セクションへの適用

sections:
  - template: hero
    title: "タイトル"
    effects:
      - BgEffectEmber

ページ全体への適用

---
layout: layouts/base.njk
effects:
  - BgEffectEmber
---

CSS 変数での調整

:root {
  --ember-count: 60;
  --ember-alpha: 0.8;
  --ember-hue: 28;     /* オレンジ */
  --ember-theme: dark;
}

← v2 エフェクト一覧 | ↑ 目次