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

 
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」
RELATED POSTS
  • JPG・PNG・GIF・SVGの画像を圧縮してくれるWebサービス「Compressor.io」
  • 【jQuery】レスポンシブ対応のタブを実装できる「GridTab」
  • 【jQuery】ページめくり効果を付けられる「OneBook3d」
  • 【jQuery】背景画像のスライドショーを実装する「Vegas2」
  • SVGで作成されたローディングアイコンセット「SVG Loaders」
  • 世界の国旗をCSSとdivのみで実装する「CSS Flags」
POPULAR POSTS
  • 【無料】漢字が使える日本語フリーフォント59選
  • 似たフォントを探したい!フォントを調べる時に役に立つツール・サイト10選
  • 無料で使える日本語・英語のかわいいフリーフォント20選
  • 無料で使えるおしゃれな英語の筆記体フリーフォント20選
  • 画像の人物を自動で切り抜きしてくれるWebサービス「remove.bg」
RECENT POSTS
  • 無料で使用できるポップなフリーイラスト「illlustrations」
  • 宮崎県小林市が提供するお肉のフリー素材サイト「oniku images」
  • CSSでよく使うレイアウト・パターンをまとめたサイト「CSS Layout」
  • Neumorphismを簡単に作れるジェネレーター「Neumorphism.io」
  • マルチカラーグラデーションのコードをコピーできる「gradienta」