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

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

デモのキャプチャ

Slot Machine Tabs
デモページ

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

デモのキャプチャ

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

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

サイトのキャプチャ

fluxiom

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

sponsors

top of page

©2018 coliss