マルチカラムのリサイズアニメーション

note

複数の要素が並んだカラムレイアウトで、マウスホバーに対応して各カラムのサイズが拡張・縮小するアニメーションです。（モバイルデバイスではタップで動作します）

Flexboxを使用したレイアウトで、Flexアイテム要素の伸縮値を調整することによって、各カラムのサイズが変化するアニメーションを実現します。カラムを縦並びにすると、幅ではなく高さを可変にすることも可能です。リサイズのアニメーション時には、フィルターを適用しコンテンツのカラーを変化させることで、アニメーションがより際立って見えるようになります。

CSSのみで実現できるシンプルな動きですが、キービジュアルなど目立たせたいコンテンツにおいては、デザインのアクセントになることが期待できます。