AK²-Engine が動かす Canvas エフェクト統合カタログ。
背景オーバーレイ用(セクション背景・ページ全体)に分類して掲載。
空気力学的な姿勢制御エンジン搭載。縦・横モードを切り替えながらX/Y独立のきりもみ回転で花びらがパタパタ翻る。和風・春・ブライダルに。
effects: [cherry-blossom]
サイン波で個別に明滅する発光体が漂う。radialGradient + lighter 合成で柔らかな輝き。夏の夜・和風・幻想系に。
effects: [firefly]
デモを見る
ガウス近似乱数のランダムウォークとベルヌーイ試行の確率的方向転換。横滑空時は空気抵抗で落下が緩み、Path2D描画の楓シルエットが自然に舞い落ちる。
effects: [maple-leaves]
空気力学的な姿勢制御と卵型フォルムの落ち葉エフェクト。チカチカ防止の最低幅保証でなめらかにきりもみ回転。秋テーマ・和風・旅館に。
effects: [leaf-fall]
カスタムSVGパスから起こしたもみじ形をフラットスピンと疑似3Dパースペクティブで舞わせる。斜め上から見下ろす立体感が特徴。秋・和風・日本庭園に。
effects: [momiji]
放射状グラデーションで立体感を表現した雫形パーティクルが落下する。大きい粒ほど速く落ちるリアルな速度差で奥行き感を演出。雨・梅雨・清涼・リゾートに。
effects: [rain]
ランダムな座標から同心円が自動的に広がり消えていく。内外2重リングで奥行き感を演出。水・癒やし・スパ・リゾート系に。
effects: [wave-ripple]
デモを見る
大型の横長グラデーション楕円が横方向にゆっくりと流れる。重なり合うことで境界の曖昧な雲形を表現。霧・夢幻・ロマンチック系に。
effects: [cloud]
デモを見る
下部から湧き上がる煙が膨張しながら上昇し消えていく。radialGradient でふんわりした煙らしい表現。温泉・カフェ・和モダン系に。
effects: [steam]
デモを見る
4点星形の光点がランダムに高速明滅する。sin の絶対値に閾値を設けた鋭い瞬き表現。ラグジュアリー・ジュエリー・ブライダル系に。
effects: [shimmer]
デモを見る
オレンジの発光粒子がゆらぎながら上昇し中途で消えていく。lighter 合成で橙→白熱色へ変化。炎・達成感・ゲーム演出に。
effects: [ember]
デモを見る
I字型の光の棒が横揺れなしにまっすぐ上昇する。上端を白熱色、下方向へオレンジグラデーションで消滅。ゲームバフ・達成感・パワーアップ演出に。
effects: [status-up]
デモを見る
ミッドポイント変位法で生成した分岐ボルトが瞬間閃光。グロー3層描画で迫力のある光表現。火花(Sparks)とは別の独立したエフェクト。テクノロジー・嵐系に。
effects: [lightning]
デモを見る
// position:relative なセクション内に配置するオーバーレイ canvas
グラデーション楕円を重ねたソフトな背景装飾。CSS アニメーションで浮遊。色・位置・サイズをパラメータで指定。
bgShapes([{c1, c2, top, left, w, h}])
デモを見る
SakuraEffect を section-effects.js で駆動。section に position:relative が必要。
{{ bgSakura() }}
bgSnow・bgAurora・bgSparks の3種。対応する Canvas エフェクトクラスを section-effects.js が自動描画。
utils: [section-effects]
// AK²-Engine に登録して canvas 全体を使うエフェクト