スマホサイトでよく見るヘッダーやフッターにあるfixed固定メニュー/タブバー。
ただ普通に置くだけでも良いですが、どうせ設置するなら簡単なアニメーションがついている方がサイトが賑やかになりますし、動きが面白いとより注視してもらえます。
今回は簡単にコピペで使えるアニメーション付きフッターfixed固定メニューHTML&CSSを12つご紹介します。
ぜひ参考にしてサイトやWEBアプリに取り入れてみましょう。
スムーズにスライドするfixed固定メニュー(Tab Bar Menu Animation)
See the Pen
Tab Bar Menu Animation by Doğukan Çavuş (@dgknca)
on CodePen.
水が注がれるようなアニメーションが面白いfixed固定メニュー(Liquid Tab bar animation)
See the Pen
Liquid Tab bar animation by Aaron Iker (@aaroniker)
on CodePen.
円が移動するfixed固定メニュー(Navigation bar with circle flexible highlight POC)
See the Pen
Navigation bar with circle flexible highlight POC by Zed Dash (@z-)
on CodePen.
円が下からアイコンをつきあげるfixed固定メニュー(Fancy tab bar active animation)
See the Pen
Fancy tab bar active animation by Aaron Iker (@aaroniker)
on CodePen.
3Dfixed固定メニュー(3D Tab bar active animation)
See the Pen
3D Tab bar active animation (Google Chrome) by Aaron Iker (@aaroniker)
on CodePen.
フォルダ機能風fixed固定メニュー(Add file tab bar animation)
See the Pen
Add file tab bar animation by Aaron Iker (@aaroniker)
on CodePen.
色が塗り替わるシンプルなfixed固定メニュー1(Tab bar active animation#1)
See the Pen
Tab bar active animation by Aaron Iker (@aaroniker)
on CodePen.
色が塗り替わるシンプルなfixed固定メニュー2(Tab bar active animation#2)
See the Pen
Tab bar active animation #2 by Aaron Iker (@aaroniker)
on CodePen.
上から色違いのアイコンがスライドするfixed固定メニュー(Tab Bar Interaction)
See the Pen
Tab Bar Interaction by Zed Dash (@z-)
on CodePen.
下線が移動するfixed固定メニュー(Fluid tab active state)
See the Pen
Fluid tab active state by Aaron Iker (@aaroniker)
on CodePen.
選択したアイコンの上部が膨らむfixed固定メニュー(Fluid tab bar)
See the Pen
Fluid tab bar by Mikael Ainalem (@ainalem)
on CodePen.
CSSのみで動くスライダー＆fixed固定メニュー(Scooped Selector)
See the Pen
Scooped Selector | CSS-only cut-out tab navigation | @keyframers 1.16.0 by @keyframers (@keyframers)
on CodePen.
