v2 エフェクト

BgEffectStatusUp

ゲームのステータスアップ演出のようなバーが上昇するエフェクト。ゲーミング・デジタル・RPG系に。

PREVIEW

← v2 エフェクト一覧


デモ


概要

縦方向のバーが下から上に向かってゆっくりと上昇するエフェクトです。ゲームの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;
}

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