画像に集中線を追加するjQueryプラグイン「Booom」が楽しい

Booom

画像に集中線を追加するjQueryプラグインBooomを使ってみて、これが面白くてちょっとハマッてしまったのでご紹介。

好きな画像の上に手軽に集中線をかぶせることが可能です。

  
この記事は2年以上前に書かれたものです。
情報が古い可能性があります。

公式配布ページ

jQueryとプラグインの読み込み

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="./js/booom.js"></script>

jQueryとBooomプラグインを読み込みましょう。

使い方

div要素などで囲って $(指定したい要素).Booom(); といった感じで記述します。

<div class="line">
  <img src="pakutaso_kyouhei.jpg" alt="" title="" width="610" />
</div>

<script>
$(function(){
	$(".line").Booom();
});
</script>

適用したサンプル
画像に集中線が追加されました!
ちなみにこのデフォルトの集中線はプラグイン内にbase64エンコードされたデータが格納されているようなので、集中線の画像をファイルとして配置しなくてもこのように表示してくれます。

集中線の座標をずらす

オプションで widthheight を指定すると集中線の座標を中心からずらすことができます。

<div class="line">
  <img src="pakutaso_kyouhei.jpg" alt="" title="" width="610" />
</div>

<script>
$(function(){
  $(".line").Booom({ width:-60, height:-80 });
});
</script>

適用したサンプル2

集中線の画像を指定する

オプションで path を指定するとオリジナルの集中線を指定できます。

<div class="line">
  <img src="pakutaso_kyouhei.jpg" alt="" title="" width="610" />
</div>

<script>
$(function(){
  $(".line").Booom({ width:-60, height:-80, path:"line.png" });
});
</script>

適用したサンプル3

  

共有やブックマークなど