画像にJavaScriptで動くマスクをかけられる「Masked Slider」

画像を印象的にするにはこういった手法もいいかもしれません。
jQueryのプラグイン「Masked Slider」を使用すると、画像の上に動くマスクをかけることができます。

使用方法

Masked Sliderからjquery.masked-slider.jsをjQueryからjquery.jsをダウンロードします。


<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.masked-slider.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
	$("#id名").maskedSlider({
	    duration: 3000, //片道の時間
	    opacity: 0.3, //マスクの透明度
	    stripHeight : 55, //マスクしない場所の幅
	    horizontal : false, //縦に移動させる場合は true
	    topSliderColor : '#bfbab7', //上部のマスク色
	    bottomSliderColor : '#bfbab7' //下部のマスク色
	});
});
</script>

あとはマスクをかけたい場所を上記idで囲みます。


<div id="id名">
	<img src="画像パス" />
</div>

なお、CSSで上記範囲の縦横を指定する必要があります。

サンプル

Javascriptサンプルページ一覧

skuare.net