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

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

sponsors

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

記事作成:
記事URL:

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