BgEffectGrid

← v2 エフェクト一覧

デモ

• ライト背景デモ →
• ダーク背景デモ →

概要

ページ開幕時に細いグリッド線が順次展開・構築されるアニメーションです。完了時に ak2:grid-ready カスタムイベントを発行するため、他のアニメーション（useLogoAnimation: true によるSVGストロークアニメーションなど）と連動させることができます。

注意: このエフェクトは1回きりのローディング演出です。繰り返しアニメーションには使用できません。

CSS カスタム変数

このエフェクトに調整可能な CSS カスタム変数はありません。グリッドサイズは内部で 60px 固定です。

カスタムイベント

document.addEventListener('ak2:grid-ready', () => {
  // グリッド完成後の処理
});

使用例

セクションへの適用

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

ページ全体への適用

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

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