[JS]パネルをスロットマシンのように切り替えるタブUIのスクリプト
パネルの切り替えに大胆ながら派手すぎないエフェクトを取り入れたタブUIのスクリプトをCSS-Tricksから紹介します。
デモではタブをクリックすると、三つに分かれたパネルがスロットマシンのようにずれながらスライドして切り替わります。
スロットマシンのようにスライド
このアイデアの元となったのはfluxiomのfeaturesで、「Overview」「Organize」「Deliver」のボタンをクリックすると、その下のコンテンツがスロットマシンのようにスライドします。
HTMLはタブはリスト要素、パネルはdiv要素で実装されており、パネルの要素は三分割する必要があります。
スクリプトのベースにはjQueryが使用されており、スロットマシンのように少しずつずらしてスライドさせています。
Post on:2010年4月7日
Comments
10時のヘッドライン | CROSS SBM
on 2010年4月7日
[...] [...]
» [JS]パネルをスロットマシンのように切り替えるタブUIのスクリプト | コリス My_Room-bookmarks
on 2010年4月7日
[...] [JS]パネルをスロットマシンのように切り替えるタブUIのスクリプト | コリス [...]
ノブ
on 2010年4月8日
コリスさん始めまして。
いつも参考に差せて頂いております。
Slot Machine Tabsサンプルをページに設置してみましたが、ダブをクリックするとコンテンツがスライドするのと同時にページ全体上に上がってしまいます。本家のサイト確認してもこれと言ったコントがありません。ページ全体が上に上がらないようにSlot Machine Tabsを設置できないでしょうか？
お忙しいところ申し訳ごさいませんが、宜しくお願いします。
コリス
on 2010年4月8日
> ノブ さん
ブラウザの表示領域が狭い場合に起きる現象でしょうか？
おそらく、タブのリンク記述にアンカーを使用したいるためにおこるのが原因だと思います。
この挙動を外す場合は、リンクにアンカーを使用しないで、JavaScriptを直接記述すると解決しますが、スクリプトのオフ時にリンクが動作しない問題点もあります。
ノブ
on 2010年4月8日
お返事ありがとうございます。
僕もアンカーだと思っていました。
スプリクトで指定ができるのですか。
良ければ教えて頂けませんか。
デモサイトです。サンプルのフルコピーです。
一度確認して頂けるでしょうか。
http://www.
ＵＲＬは、公開しないでください。
お手数ですが、宜しくお願いします。
コリス
on 2010年4月8日
> ノブ さん
配付サイトのスクリプト「slotmachine.js」をみると、L.32の「click」の箇所以降にクリック時の動作が記述してあるので、ぜひご自身でチャレンジしてみてください。
freewebdev.jp
on 2010年4月11日
パネルをスロットマシンのように切り替えるタブUIのスクリプト
「Slot Machine Tabs」
パネルの切り替えに大胆ながら派手すぎないエフェクトを取り入れたタブUIのスクリプトをCSS-Tricksから紹介します。
デモではタブをクリックすると、三つに分かれたパ…