[JS]パネルをスロットマシンのように切り替えるタブUIのスクリプト
Post on:2010年4月7日
パネルの切り替えに大胆ながら派手すぎないエフェクトを取り入れたタブUIのスクリプトをCSS-Tricksから紹介します。
![デモのキャプチャ](/wp-content/uploads-2010/2010040703.png)
デモではタブをクリックすると、三つに分かれたパネルがスロットマシンのようにずれながらスライドして切り替わります。
![デモのキャプチャ](/wp-content/uploads-2010/2010040704.png)
スロットマシンのようにスライド
このアイデアの元となったのはfluxiomのfeaturesで、「Overview」「Organize」「Deliver」のボタンをクリックすると、その下のコンテンツがスロットマシンのようにスライドします。
![サイトのキャプチャ](/wp-content/uploads-2010/2010040705.png)
HTMLはタブはリスト要素、パネルはdiv要素で実装されており、パネルの要素は三分割する必要があります。
スクリプトのベースにはjQueryが使用されており、スロットマシンのように少しずつずらしてスライドさせています。
sponsors