アニメーションで変化するタブ切り替え

はじめに Webデザインで頻繁に使われる「タブ切り替え」のインターフェイス。レイヤ状態にすることで、コンパクトなエリアに多くのコンテンツを表示でき、大変便利ですね。今回はこの切り替えのタブにアニメーションを付けてみたいと思います。 まずは、サンプルをご覧ください。 サンプル タブをクリックする度、ちょうど「水位」が上がったり下がったりしているように見えます。なので、「水」を使った施設、例えば水族館やプール、さらにショットバーなどの飲食業など、さまざまな業種に使えますね。 まず、HTMLと、タブの切り替え動作のためのJavaScriptをそれぞれ用意します。今回、CSS3でのアニメーションの解説が趣旨のため、JavaScriptはjQueryで手短かに設定します。

[mnrm820]

CSS3

[deep_one]

サンプルの見た目は悪くないけど…ブラウザ別にハックしなければいけないのか。