v2 エフェクト
BgEffectStatusUp
ゲームのステータスアップ演出のようなバーが上昇するエフェクト。ゲーミング・デジタル・RPG系に。
PREVIEW
デモ
概要
縦方向のバーが下から上に向かってゆっくりと上昇するエフェクトです。ゲームのHPゲージやレベルアップ演出を連想させる独特のビジュアルで、ゲーミング・デジタルアート・エンターテインメント系のページに個性的な演出を加えます。--status-up-theme: light で白背景にも対応します。
CSS カスタム変数
| 変数名 | デフォルト | 説明 |
|---|---|---|
--status-up-count |
35 |
最大バー数 |
--status-up-alpha |
1.0 |
アルファ係数 |
--status-up-hue |
40 |
バーの基本色相(0〜360)。40 で黄金系 |
--status-up-theme |
'dark' |
テーマ。'dark' または 'light' |
使用例
セクションへの適用
sections:
- template: hero
title: "タイトル"
effects:
- BgEffectStatusUp
ページ全体への適用
---
layout: layouts/base.njk
effects:
- BgEffectStatusUp
---
CSS 変数での調整
:root {
--status-up-count: 50;
--status-up-alpha: 0.8;
--status-up-hue: 120; /* グリーン系 */
--status-up-theme: dark;
}