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


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

IT/WEB業界への転職なら求人サイトGreen

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;
	}

};

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

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

follow us in feedly