jQuery・タッチデバイスでも滑らかなタブパネルを4種類作りました [IE8対応]

150811_001

一般的なタブ切り替えを2点と、使いどころが微妙な2点を、暇だったので作りました。お客さんから、「いつもと違う動きにしたい」などと言われたときに、提案できるかもしれません。

目次

検証済みブラウザとOS

  • IE 8~
  • Firefox
  • Google Chrome
  • Safari
  • Windows 7
  • OS X Yosemite
  • iOS 8
  • Android 4.1

 

このjQueryで出来ること、出来ないこと

description

出来ること
  • タッチデバイスでも、PCと同じように瞬時に切り替え
  • フェードが滑らか
  • 攻殻機動隊ライクなテキストアニメーション(使いどころが微妙)
出来ないこと
パネルを開いた状態で、トリガーをクリックして元に戻す
タッチデバイスでも滑らかな理由
Julian Shapiro 氏の、 Velocity.js を利用しているため。

 

要点とコード

code

共通コード

 

シンプル

どこにでもある普通のコード。

 

フェード

fadeIn() を velocity() メソッドに変更しているだけの、普通のコード。

 

縦スライド

  • show() を velocity() メソッドの slideDown に変更しているだけ
  • ドロップダウンナビの、トリガーをクリックしても元には戻らないバージョン

 

横スライド

デフォルトを width: 0; に設定し、トリガーの発火で width: 100%; にすることで、攻殻機動隊ライクなテキストアニメーションを表現。

 

カスタマイズ

customize

トリガーを画像にしたい
a / hover / .active を背景画像にする。画像は時代遅れかつ面倒なので、テキストにすべき。
攻殻機動隊ライクな動きではなく、普通の横スライドにしたい
li に div をネストして、CSSで横幅を指定すればOK。

 

問題点

Android 4.1 でカクつく

 

Web制作の現場で使うjQueryデザイン入門[改訂新版] (Web Professional Books)
西畑一馬
KADOKAWA/アスキー・メディアワークス
売り上げランキング: 16,631

コメントを投稿する

※メールアドレスは私にだけ届き、サイトには表示されません。
※「送信する」ボタンは、一度だけクリックしてお待ちください。