[JS]スロットマシンのようなアニメーションが楽しいナビゲーションを実装するチュートリアル

背景をスロットマシンのようにアニメーションさせるナビゲーションを実装するチュートリアルを紹介します。

デモのキャプチャ

jQuery quickie: Slot machine navigation
デモページ

[ad#ad-2]

デモではナビゲーションの各ラベルをマウスでホバーすると、スロットマシンのアニメーションを楽しめます。

ナビゲーションの実装

HTML

シンプルなリスト要素で実装します。

<ul id="jquerynav" class="navigation">
   <li><a href="#" class="marcofolio">Marcofolio.net</a></li>
   <li><a href="#" class="rss">RSS</a></li>
   <li><a href="#" class="twitter">Twitter</a></li>
   <li><a href="#" class="jquery">jQuery</a></li>
</ul>

CSS

一枚の画像を使ってCSS Spriteで、スタイルを定義します。

.navigation { list-style:none; width:800px; height:75px; }
.navigation li { display:inline; text-indent:-9999px; }
.navigation li a { display:block; float:left; width:200px; height:75px;
   background-image:url("../images/buttons.png"); }
.navigation li a.marcofolio { background-position:0 0; }
.navigation li a.rss { background-position:-200px 0;  }
.navigation li a.twitter { background-position:-400px 0; }
.navigation li a.jquery { background-position:-600px 0; }

JavaScript

jQueryを使用し、下記のスクリプトを記述します。

$(document).ready(function()
{
	// Set the nescesarry data
	$("#jquerynav li a").each(function(){
		var backgroundPositions = $(this).css('background-position').split(" "); // Returns "##px" and "##px"
		$(this).data("originalXpos", backgroundPositions[0].slice(0, -2)); // Retrieve the original X position
		$(this).data("newYpos", 0); // Set the new Y position to 0
	});
	
	// Capture the "hover" events
	$("#jquerynav li a").hover(function(){
		$(this)
			.data("newYpos", $(this).data("newYpos") + 1)
			.stop()
			.animate({
				backgroundPosition: $(this).data("originalXpos") + "px " + $(this).data("newYpos") * 75 + "px"
			}, 600, "easeOutCirc");
	}, function(){
		$(this)
			.data("newYpos", $(this).data("newYpos") + 1)
			.stop()
			.animate({
				backgroundPosition: $(this).data("originalXpos") + "px " + $(this).data("newYpos") * 75 + "px"
			}, 400, "easeInCirc");
	});
});

[ad#ad-2]

また、背景のアニメーションにはプラグインを使用します。

サイトのキャプチャ

jQuery: Background-Position Animation Plugin

sponsors

top of page

©2018 coliss