Experiments
09
EXP. 01
水面リップル
マウスの動きで水面が本物のように揺れる。波動方程式をシェーダーでリアルタイム計算。
WEBGL2 / GLSL SIMULATION
EXP. 02
スクロール追従ライン
スクロールに合わせて1本の線が画面を右へ左へクネクネと降りていく。太さも変更可能。カーソル追従版の糸もおまけ収録。
SVG / STROKE-DASHARRAY
EXP. 03
スクロール分解
スクロールに合わせて写真と文字が粒子に分解され、また組み上がる。逆再生も自在。
CANVAS / SCROLL SCRUB
EXP. 04
立体ギャラリー
写真が3D空間のリングに並ぶギャラリー。ドラッグで回転、マウスで視点が傾く。
CSS 3D TRANSFORM
EXP. 05
多層パララックス
スクロールとマウスの両方に反応する奥行き。層の速度差と窓抜きで立体感をつくる。
SCROLL + POINTER DEPTH
EXP. 06
パーティクルテキスト
数千の粒が集まって文字になり、次の言葉へ組み変わる。カーソルで粒を散らせる。
CANVAS / 4000 PARTICLES
EXP. 07
リキッドホバー
写真の上をなでると液体のように歪む。ハイエンドなギャラリーサイトの定番演出。
WEBGL / DISPLACEMENT
EXP. 08
すりガラスとシェイプ
すりガラスの奥でグラデーションのかたまりがスクロールと一緒に流れる。ぼかし調整スライダー付き。
CSS / BACKDROP-FILTER
EXP. 09
パーティクルの庭
ほたる・ながれ・ゆき・はなび。同じ粒でもルールを変えるだけで別世界になる4モード切替。
CANVAS / 4 MODES