タブやナビゲーションがアクティブな時に、ハイライトのラインがすぅっーと移動するアニメーションを実装

タブがアクティブな時に、ハイライトのラインがすぅっーと移動するアニメーションを実装したデモを紹介します。リスト要素でシンプルに実装されているので、タブだけではなく、ナビゲーションなどにも利用できると思います。

下記は、デモでの操作をアニメーションgifにしたものです。

デモのアニメーション


この実装は、Dribbbleのアートワークにインスパイアされたそうです。

デモのアニメーション

Tabs

HTML

HTMLは非常にシンプルで、リスト要素で実装されています。

CSS

ulタグに「display: flex;」を指定し、リスト要素をFlexboxで配置します。

JavaScript

jquery.min.jsを外部ファイルにして、下記のコードを記述します。

デモ

実際の動作は、下記ページで確認できます。

See the Pen Fluid tab active state by Aaron Iker (@aaroniker) on CodePen.

sponsors

top of page

©2018 coliss