2015/02/10

画像にスポットライトを当てられるプラグイン『Spotlight』の紹介

画像にスポットライトを当てられるプラグイン『Spotlight』の紹介

画像などの要素に,まるでスポットライトを当てたようなエフェクトを実装できるプラグイン『Spotlight』の使い方を紹介します.

目次

入手方法

https://github.com/emn178/jquery-animations-spotlightにアクセスし,Download項目内にある,Compress(圧縮版)もしくはUncompress(非圧縮版)を右クリックしてダウンロードします.

ダウンロードしたJSファイルを,jQuery本体とともにページに読み込みます.

<script src="jquery.min.js"></script>
<script src="jquery.animations.min.js"></script>

設置方法

基本的な使い方として,以下のような記述をクリックやページのロード時などのイベントに設定します.

$('スポットライトを当てたい要素').animate('spotlight');

また,オプションを第二引数に設定することが出来ます.

$('スポットライトを当てたい要素').animate('spotlight', {
    "radius" : 55, // ライトの半径(ピクセル)
    "count" : 4 // ライトの動く回数
});

サンプル

動作サンプルはhttp://emn178.github.io/jquery-animations-spotlight/samples/spotlight/にあります.

半径や動く回数の他にも,ライトの終点やeasingの種類など,様々なオプションを自在に設定できるジェネレータがあるので,動作を見て確認しながらコードを生成することが出来ます.

まとめ

ページトップの画像などの目を引きたい画像がある場合は,使ってみてはいかがでしょうか.