ゆるやかに色彩を変えていくエフェクトスクリプトBlend

マウスオーバーでファンタジックに画像が切り替わるjQueryプラグイン、Bland。
ゆったりと色彩を変化させる美しいリンクボタンを作成することができますので、高級感漂うウェブサイト作りに最適なスクリプトです。

「text-indent: -9999px;」というCSSによる画像置き換えを使用しており、デフォルトの他にも「点滅」と「逆再生」の２種類のエフェクトが用意されています。
スピードの調節も可能。

エフェクト：デフォルト / スピード：600

ダウンロード

jQuery Blend – Color Powered
Downloadの「v1.2」をクリックしてダウンロード。解凍してください。

Ajaxライブラリjquery-1.3.2.min.jsを別途用意する必要があります。
jQueryダウンロード
ダウンロード後、解凍したblendフォルダに入れてください。

実装手順

上に表示しているサンプルのソースです。
IE6でも問題なく表示されるように、CSS及びHTMLにul liを使用して魔法のプロパティ「display: inline;」を付け加えました。

用意したのは以下の画像。
137px×174pxの画像を4列2段に並べた1枚画像を、マウスオーバー時にbackground-positionで左や上にズラして表示します。

<head>～</head>に以下を挿入。

スピードの調整は赤字部分の数値を変更。
エフェクトは青字部分を「pulse:true」（点滅）もしくは「reverse:true」（逆再生）に書き換えることで変更が可能です。

<script type="text/javascript" src="http://サイトURL/blend/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://サイトURL/blend/jquery.blend.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#list a").blend({
speed: 600, //エフェクト速度
pulse: false //エフェクト選択
});
});
</script>

<style type="text/css">
.blend_menu {
	clear: both;
	margin: 0;
	padding: 0;
}
.blend_menu li {
	float: left;
	display: inline;
	margin-right: 4px;
}
.blend_menu li.end {
	margin-right: 0;
}
.blend_menu li a {
	display: block;
	text-indent: -9999px;
	width: 137px; /* 画像サイズ：縦 */
	height: 174px; /* 画像サイズ：横 */
	margin: 0;
	padding: 0;
	background: url(panel.jpg); /* 画像URL */
	background-repeat: no-repeat;
	cursor: pointer;
	overflow: hidden;
}

#list_spring{background-position:0 0;}
#list_spring:hover,#list_spring.hover{background-position:0 -174px;}

#list_summer{background-position:-137px 0;}
#list_summer:hover,#list_summer.hover{background-position:-137px -174px;}

#list_autumn{background-position:-274px 0;}
#list_autumn:hover,#list_autumn.hover{background-position:-274px -174px;}

#list_winter{background-position:-411px 0;}
#list_winter:hover,#list_winter.hover{background-position:-411px -174px;}
</style>

使用場所に以下を記述。

<div id="list">
<ul class="blend_menu">
	<li><a href="#" id="list_spring">Spring</a></li>
	<li><a href="#" id="list_summer">Summer</a></li>
	<li><a href="#" id="list_autumn">Autumn</a></li>
	<li class="end"><a href="#" id="list_winter">Winter</a></li>
</ul>
</div>

idやclassはお好きな名前に付け直して使用してください。
画像サイズの指定とbackground-positionの修正もお忘れなく。

では、がんばってください。

via（コリス）

«
»

1件のコメント

  1. [...] ウスオーバー時にゆるやかに色彩を変えていくエフェクトスクリプトです。 ロゴや、グローバルナビなどに使いました。 参考サイト：http://e-maga.com/javascript/blend/ 実装方法は過去記事から [...]

    ピンバック by 制作発表終了！そしてサイト制作の総復習 – GO BIG BLUE 12 サイト製作日記 — 2012年1月30日 @ 11:19 PM

コメントは管理者の承認後に表示されます




Comment