概要
「INITIALIZING…」がノイズのように明滅・揺れたあと画面が横スライドで切り替わり、RGBずれのデジタルグリッチとともにメイン画像が現れる、サイバー/テック系のオープニング。
使用技術
・GSAP
・CSS `mix-blend-mode: screen` ＋ `background-blend-mode: multiply` によるRGB分離レイヤー、`clip-path` によるスライス表現
・スキャンライン風の多重 `linear-gradient` 背景（`::before`）
実装ポイント
・イントロ文字は `duration:0.05, repeat:12, yoyo:true` の高速点滅で「起動中」感を演出。続けて `x` と `skewX` を `gsap.utils.random(-15,15)` で振ってブレを表現
・画面遷移はオーバーレイを `xPercent:100`＋`power4.in` で横に吹き飛ばす。`filter:”blur(10px)”` も併用
・グリッチ本体は赤・青の `.glitch-layer` を `display:block` にしてから、`x` のランダム移動と `clip-path: inset(…)` の動的生成でスライスを走らせる。値は毎回 `() =>` の関数で返し、コマごとに違う乱数にしている
・完了時は `onComplete` で各レイヤーを `display:”none”` に戻す。さらに `gsap.delayedCall(gsap.utils.random(2,5), ambientGlitch)` で再帰させ、2〜5秒間隔の「定常グリッチ」を継続発生させている
コアスニペット
heroLayers.forEach((layer) => {
gsap.to(layer, {
x: () => gsap.utils.random(-30, 30),
clipPath: () => {
const t = gsap.utils.random(0, 85);
return `inset(${t}% 0 ${100 - (t + gsap.utils.random(1, 20))}% 0)`;
},
duration: 0.06,
repeat: 12,
yoyo: true,
onComplete: () => gsap.set(layer, { display: "none" }),
});
});