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

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

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

Expanding Grid Menu


  • 魅力的なチルトホバーエフェクトを実装できる「Tilt Hover Effects」
  • 複数のレイヤーを活かしたきれいなエフェクト「Multi-Layer Page Reveal Effects」
  • ブロックのアニメーションエフェクトが美しい「Block Reveal Effects」
  • 水中の歪みを表現したエフェクトが気持ちいい「Liquid Distortion Effects」
  • モーフィングアニメーションのページ遷移を実装できる「Morphing Page Transition」
RELATED POSTS
  • 【jQuery】スクロールで画像に3D効果を掛けられる「tiltedpage_scroll.js」
  • 立体感のあるアニメーションホバーエフェクト「Stack Motion Hover Effects」
  • シンプルなチャートを実装できるライブラリ「Frappé Charts」
  • 日本の契約書のためのCSSライブラリ「Keiyaku CSS」
  • あると便利なスクロールアニメーションライブラリ11選
  • JPG・PNG・GIF・SVGの画像を圧縮してくれるWebサービス「Compressor.io」
RECENT POSTS
  • 背景や区切り線などを簡単に装飾できるCSSライブラリ「pattern.css」
  • セクションの区切りをデザインできる「CSS Section Separator Generator」
  • 動画やアニメーションgifの背景を自動で消去してくれる「Unscreen」
  • ポップなイラストをダウンロードできる「Download 80 free illustrations」
PICKUP
  • CSSで実装するボタンデザインとホバーエフェクトのアイデア
  • WordPressにおすすめレンタルサーバー8選【初心者向け】
  • 【無料・低価格】ロゴ作成に役立つロゴジェネレーター12選
  • 導入しておきたいWordPressのおすすめプラグイン