[JS]パネルをスロットマシンのように切り替えるタブUIのスクリプト

Post on:2010年4月7日

sponsors

パネルの切り替えに大胆ながら派手すぎないエフェクトを取り入れたタブUIのスクリプトをCSS-Tricksから紹介します。

デモではタブをクリックすると、三つに分かれたパネルがスロットマシンのようにずれながらスライドして切り替わります。

スロットマシンのようにスライド

このアイデアの元となったのはfluxiomのfeaturesで、「Overview」「Organize」「Deliver」のボタンをクリックすると、その下のコンテンツがスロットマシンのようにスライドします。

HTMLはタブはリスト要素、パネルはdiv要素で実装されており、パネルの要素は三分割する必要があります。
スクリプトのベースにはjQueryが使用されており、スロットマシンのように少しずつずらしてスライドさせています。