集中線を画像に追加するプラグインを作りました
2013年06月19日

そうさん(@sou_lab)が書いた記事が超面白かったのでそうさんリスペクトの僕としては僕なりの方法でリスペクトぶりを表現するしかないと思い、この記事を書くに至りましたよ。
AdobeCCの拡張機能はMXPファイルが使えないからCS6で変換した | Sou-Lablog
まぁ記事が面白いというか、記事に表示されている画像が面白いんですね。記事はね、僕よく分かんないの。Photoshopは切り出すためのものな使い方しか普段しないから。
これが面白い画像。ずっとこのノリで紹介してます。まじうけるんですけどー。
jQueryプラグイン作りました
そうさんがこれをどうやって作ったのかは分かりませんが、僕はあいにくPhotoshopで集中線を作る方法は知りません(とか言ってる間にWebcre8の優さん(@glatyou)に作り方を教わったので今度頑張って作ります)し、ブログに掲載するための画像を作る時に毎回Photoshopを開くなど考えられません。めんどくさい。
ちなみに優さんが教えてくれたのは「[Photoshop]極座標フィルタでできるクリエイティブ表現色々 – WEBCRE8.jp」です。
しかしそうさんをリスペクトしてやまない僕は何とかして僕なりのこの「おもしれーじゃねーかちくしょー!!」を表現したくて、「あ、プラグインにすれば良いんだ」に落ち着きました。
下に解説書いてるけど、デモも作ってるけど、先に作ってたデモページ
使い方
divの中に画像を入れてもらって、そのdivにクラスを指定します。
<div class="line"> <img src="tsuyopon01.jpg" alt="デートをすっぽかされて半べそになりかけのつよぽん"> </div>
画像はいつもお世話にになってるPAKUTASO/ぱくたそさんで配布されている、ともだちのつよぽんの画像を使わせてもらいました。イケメン!!
このままだと普通に表示されますね。
最初にプラグインファイルを読み込みます。
<script src="/osukinabasho/booom.js"></script>
次に、クラスを指定してBooomメソッドを記述します。
<script> $(function(){ $(".line").Booom(); }); </script>
集中線が追加されます!!
でもこれだと顔に集中しているようにはなってないですね、残念。
オプション
なので、どこにフォーカスを当てるかと、一応画像のディレクトリを自由にしたい場合のオプションをつけてます。
$(ele).Booom({path:"../img/shuchusen.png", width:-80, height: -80});
こんなかんじで、Booom()の中にパラメータを入力します。
- width: 集中線を中心から何px右にずらすか
- height: 集中線を中心から何px下にずらすか
- img: 画像を置いてるディレクトリ(htmlからのパス。デフォルトは /img/)
顔を中心に移動した!!
もしお気に召された場合はどうぞ。というかだれか集中線くれ。
最後に
今回は集中線をつけるプラグインということで、名前は「Booom」としました。アメコミっぽくね?アメコミの効果音な感じですlハッハー!ジェニーどうしたんだい!元気がないじゃないか!的なノリ。
他にこんな事も書いてます
- JavaScript祭スピンオフ! フロントエンド祭り in Co-Edo でオブジェクトベースのJSについて話してきた
- 第5回 HTML5minutes! で話してきた
- 秋のJavaScript祭りで話をしてきた
- 春のJavaScript祭りでAngularJSについてお話ししてきました
- jQueryのwidth,height系メソッドの違いについて
- ローカルマシンにNode.jsをインストール
- jQueryでChromeの場合$(function(){]); が画像読み込み前に実行される場合の対応
- AngularJSでページロード時にコンパイル前のタグが表示されるのを防ぐ
- スクロールで隠れるナビゲーションメニューのJSがステキだったので勝手にプラグイン化しました
- スペースキーでスクロールする人のためのjQueryプラグイン作った
この記事の分類
種類: Web制作
ジャンル: javascript jQuery plugin 作った
FBでコメント