DVSP-0097 | Price: 1,000円 / 1,200円 (shop) | 委託店舗: メロンブックス | 通信販売: Diverse Direct
DIVERSE SYSTEM - JAPAN - C84 三日目 西2 あ41a -
DVSP-0097 | Price: 1,000円 / 1,200円 (shop) | 委託店舗: メロンブックス | 通信販売: Diverse Direct
アニメーションで変化するタブ切り替え
はじめに Webデザインで頻繁に使われる「タブ切り替え」のインターフェイス。レイヤ状態にすることで、コンパクトなエリアに多くのコンテンツを表示でき、大変便利ですね。今回はこの切り替えのタブにアニメーションを付けてみたいと思います。 まずは、サンプルをご覧ください。 サンプル タブをクリックする度、ちょうど「水位」が上がったり下がったりしているように見えます。なので、「水」を使った施設、例えば水族館やプール、さらにショットバーなどの飲食業など、さまざまな業種に使えますね。 まず、HTMLと、タブの切り替え動作のためのJavaScriptをそれぞれ用意します。今回、CSS3でのアニメーションの解説が趣旨のため、JavaScriptはjQueryで手短かに設定します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bootstrapだけじゃない！マッハでフラットや美しいデザインのUIが導入できそうなワイヤーフレームやUIキット等色々！ | バンクーバーのうぇぶ屋
