スライドアニメーションで展開するグリッドメニュー「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」
水中の歪みを表現したエフェクトが気持ちいい「Liquid Distortion Effects」
立体感のあるアニメーションホバーエフェクト「Stack Motion Hover Effects」
モーフィングアニメーションのページ遷移を実装できる「Morphing Page Transition」

CSSやHTML5・Twiterカードなどのコードを生成できる「Web Code Tools」
【html】文字実体参照を一覧できる「html arrows」
SVGで背景パターンを作成できる「Hero Patterns」
Youtubeの埋め込み動画をレスポンシブに対応させる方法
入力フォームを実装するためのテンプレート「Boilerform」
リアルな水滴を表現できる「Rain & Water Effect Experiments」