スライドアニメーションで展開するグリッドメニュー「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

アニメーションで変化するカスタムカーソル「Custom Cursor Effects」
立体感のあるアニメーションホバーエフェクト「Stack Motion Hover Effects」
複数のレイヤーを活かしたきれいなエフェクト「Multi-Layer Page Reveal Effects」
メニューのホバーエフェクト集「Inspiration for Menu Hover Effects」
CSSでクールなグリッチエフェクトを実装できる「CSS Glitch Effect」

CSSだけで三角・矢印を作る方法
【jQuery】プレースホルダにアニメーションを実装できる「FoxHolder」
Youtubeの埋め込み動画をレスポンシブに対応させる方法
【jQuery】チルトホバーエフェクトを実装できる「Tilt.js」
リアルな水滴を表現できる「Rain & Water Effect Experiments」
Neumorphismを簡単に作れるジェネレーター「Neumorphism.io」