篤姫ボタンににアニメーション効果
誰が言ったか「篤姫ボタン」。
そんな話も1年以上前。
本名「CSSスプライト」にスライドやフェードのアニメーションを加えるスクリプトの
記事をコリスさんで拝見。
英語のサイト↓↓
SpriteMenu
１．下記の3つをダウンロード
２．<head>の中にリンク
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/jquery.spritemenu-0.2.js" type="text/javascript"></script>
３．画像を準備
pngの一枚画像で準備
４．英語のサイトから下記のスクリプトを<head>の中にコピペ
<script type='text/javascript'>
$(document).ready(function(){
$('#menu').spritemenu({
grid:"img/menu.png",
buttonwidth: 110,
buttonheight: 80,
speed: 'slow',
easing: 'easeOutBounce', //You need the easing plugin for anything other than 'swing' or 'linear'
animate: 'height'
});
$('#menu2').spritemenu({
grid:"img/menu.png",
buttonwidth: 110,
buttonheight: 80
});
});
</script>
・grid: "images/menu.png",
準備した画像の場所を指定。
・buttonwidth: 110,
・buttonheight: 80,
ナビボタン一個分の幅と高さを指定（たぶん）
他にも細かい指定ができるっぽいが英語でわからない。。。（泣）
５．HTMLとCSS
<style type="text/css">
<!--
ul#menu,
ul#menu2 {
list-style-type: none;
}
#menu li,
#menu2 li {
float: left;
}
-->
</style>
<ul id="menu">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
<div style="clear: both"></div>
<ul id="menu2">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
