スライドアニメーションで展開するグリッドメニュー「Expanding Grid Menu」

Webデザイン

2018/04/04　 2019/04/16

codropsに公開されている違うサイズのブロックをスライドしながら展開するグリッドメニュー「Expanding Grid Menu」がステキだったので忘備録。

Expanding Grid MenuはAbleton Live 10: What’s Newのオープニングアニメーションにインスピレーションを受けてを制作したそうです。

Expanding Grid Menu

CSSでクールなグリッチエフェクトを実装できる「CSS Glitch Effect」
アニメーションで変化するカスタムカーソル「Custom Cursor Effects」
複数のレイヤーを活かしたきれいなエフェクト「Multi-Layer Page Reveal Effects」
ブロックのアニメーションエフェクトが美しい「Block Reveal Effects」
水中の歪みを表現したエフェクトが気持ちいい「Liquid Distortion Effects」

JPG・PNG・GIF・SVGの画像を圧縮してくれるWebサービス「Compressor.io」
【jQuery】レスポンシブ対応のタブを実装できる「GridTab」
【jQuery】ページめくり効果を付けられる「OneBook3d」
【jQuery】背景画像のスライドショーを実装する「Vegas2」
SVGで作成されたローディングアイコンセット「SVG Loaders」
世界の国旗をCSSとdivのみで実装する「CSS Flags」