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

魅力的なチルトホバーエフェクトを実装できる「Tilt Hover Effects」
複数のレイヤーを活かしたきれいなエフェクト「Multi-Layer Page Reveal Effects」
ブロックのアニメーションエフェクトが美しい「Block Reveal Effects」
水中の歪みを表現したエフェクトが気持ちいい「Liquid Distortion Effects」
モーフィングアニメーションのページ遷移を実装できる「Morphing Page Transition」

【jQuery】スクロールで画像に3D効果を掛けられる「tiltedpage_scroll.js」
立体感のあるアニメーションホバーエフェクト「Stack Motion Hover Effects」
シンプルなチャートを実装できるライブラリ「Frappé Charts」
日本の契約書のためのCSSライブラリ「Keiyaku CSS」
あると便利なスクロールアニメーションライブラリ11選
JPG・PNG・GIF・SVGの画像を圧縮してくれるWebサービス「Compressor.io」