スマホサイト用アニメーション付きフッターfixed固定メニューHTML&CSS12選！簡単コピペで使用可！【タブバー/jQuery/デモ】

スマホサイトでよく見るヘッダーやフッターにある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.

コチラもオススメ

2019年10月29日【コピペで簡単実装】jQueryを使った動的なボタン20選！アニメーションがかっこいい！【デモ多数】 2019年9月3日【CSSで簡単に】固定した背景をスクロールして別の画像や要素に切り替えるFixed Backgrounds CSS6選【コピペで簡単実装】 2019年7月22日CSSのコピペで簡単に実装出来る！3DテキストエフェクトCSS19選【立体的ロゴ/3D文字/無料】