jQueryでスロット風のタブを作る方法

jQueryでスロットのように回転しながらタブを移動するスクリプトのチュートリアルをご紹介。

「Slot Machine Tabs」というエントリーにて作り方が紹介されています。

タブをクリックした際にちょっとした効果を与える事ができます。

デモ

javascript自体は以下のようなコードを実装するようです。

$(".box-wrapper .current .col-one").animate({
	"top": 0
}, speedOne, function() {
	ifReadyThenReset();
});
var columnReadyCounter = 0;

function ifReadyThenReset() {

	columnReadyCounter++;

	if (columnReadyCounter == 3) {
		$(".col").not(".current .col").css("top", 350);
		columnReadyCounter = 0;
	}

};

画面の遷移にアクセントを付けたい方、使ってみてはいかがでしょうか。