ブログ｜IXcode

画像が、筋を引きながら左から現れる。スクロールで奥行きがつくオープニング

白い画面に、画像が左から筋を引くように現れ、スクロールすると、画像ごとに違う動きで入ってくる。WebGL のシェーダー1枚で作る、画像の出方を体験できます。

水色の幕が下から上へ引いていき、揺れる水の中の景色が現れる。WebGL の小さなシェーダーで作る、水のようなオープニングを、英文のモダンなページで体験できます。

大・中・小の画像が、それぞれ違う速さで流れ、真ん中の大きな文字だけが画面に残る。スクロールで「奥行き」を作る動きを、英文のモダンなページで体験できます。

細かな粒が文字の形に集まり、光がひと筋走って、風に乗って散っていくオープニングを、英文のモダンなページで体験できます。

太い線で画面を覆い、描き戻して中身を見せるオープニングを、英文のモダンなページで体験できます。

three.js で、カードを 3D の曲線に並べました。動きはすぐには止まらず、余韻を残して、近いカードへ吸い付きます。

最終値の幅をあらかじめ確保して、「件以上」が揺れないようにする方法です。動くデモ付き。

@property と conic-gradient で、枠線が時計回りに描かれるカードを作ります。