[JS]スロットマシンのようなアニメーションが楽しいナビゲーションを実装するチュートリアル
Post on:2011年5月25日
sponsors
背景をスロットマシンのようにアニメーションさせるナビゲーションを実装するチュートリアルを紹介します。
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]
また、背景のアニメーションにはプラグインを使用します。
sponsors
