EFFECT PLUGINS / 背景エフェクト
CloudEffect
白い雲が緩やかに左右に流れるエフェクト。空・清潔感・爽やかさを表現します。
概要
ふんわりとした雲形状がゆっくり横移動するエフェクトです。明るい背景のページや、自然・環境系サイトの柔らかい演出として活用できます。色相を変えると夕暮れ雲なども表現できます。
CSS カスタム変数
| 変数名 | デフォルト | 説明 |
|---|---|---|
--cloud-count |
8 |
雲の数 |
--cloud-alpha |
1.0 |
アルファ係数 |
--cloud-hue |
210 |
雲の色相（0〜360）。210 で青白系 |
使用例
セクションへの適用
sections:
- type: hero
title: "タイトル"
effects:
- CloudEffectEffect
ページ全体への適用
---
layout: layouts/base.njk
effects:
- CloudEffect
---
CSS 変数での調整
:root {
--cloud-count: 5;
--cloud-alpha: 0.7;
--cloud-hue: 30; /* 暖色系（夕暮れ） */
}