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

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

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

Expanding Grid Menu



  • ブロックのアニメーションエフェクトが美しい「Block Reveal Effects」
  • 魅力的なチルトホバーエフェクトを実装できる「Tilt Hover Effects」
  • メニューのホバーエフェクト集「Inspiration for Menu Hover Effects」
  • モーフィングアニメーションのページ遷移を実装できる「Morphing Page Transition」
  • アニメーションで変化するカスタムカーソル「Custom Cursor Effects」
RELATED POSTS
  • アニメーションが素敵なツールチップ「Playful Little Tooltip Ideas」
  • ブロック要素をドラッグできるグリッドレイアウト「Muuri」
  • 【jQuery】いろんなエフェクトの背景画像カルーセル「Crosscover」
  • YoutubeやGoogleMapをレスポンシブ化するジェネレーター「Embed Responsively」
  • 【JS】簡単な記述でCSSアニメーションを実装できる「AniJS」
  • キレイな装飾のテキストアニメーション「Decorative Letter Animations」
RECENT POSTS
  • 無料で使えるフリーアイコン素材サイト15選
  • 配色を決める時に役立つカラーパレット22選
  • 無料で使えるハロウィンデザイン・イラスト素材サイト
  • ロゴデザインの参考になるロゴギャラリーサイト16選
PICKUP
  • CSSで作成する吹き出しとデザインのアイデア
  • 【2020年版】WordPressおすすめレンタルサーバー6選 -初心者向け-
  • CSSで実装するボタンデザインとホバーエフェクトのアイデア
  • 無料で使えるおしゃれな英語の筆記体フリーフォント20選