on:2018年7月5日sponsorsタブがアクティブな時に、ハイライトのラインがすぅっーと移動するアニメーションを実装したデモを紹介します。リスト要素でシンプルに実装されているので、タブだけではなく、ナビゲーションなどにも利用できると思います。下記は、デモでの操作をアニメーションgifにしたものです。この実装は、Dribbbleのアートワークにインスパイアされたそうです。TabsHTMLHTMLは非常にシンプルで、リスト要素で実装されています。flex;」を指定し、リスト要素をFlexboxで配置します。100vh;}JavaScriptjquery.min.jsを外部ファイルにして、下記のコードを記述します。width;}});</script></body>デモ実際の動作は、下記ページで確認できます。