[jQuery]クリックすると、ほわんと広がる輪っか。pointer.jsを実装してみた！

こんにちは。最近、布団から出られません。井畑です。
今回はnejimaki-boxさんでご紹介されていた、jQuery「pointer.js」がかわいかったのでクリエイティブメモメモにも実装させていただきました。やったことを一応備忘録として残しておきます。
※モダンブラウザのみ対応ですので、ご了承ください。対応していないものだと、輪っかが四角だったり、出なかったりします。

デモページ

pointer.jsの導入手順

以下の手順で導入しました。

1.このページより、jsをダウンロード（コピペ）
2.ダウンロードしたデータを「pointer.js」と名前をつけて保存。
3.jQuery.jsと一緒に設置する。
jQueryのダウンロードはこちらから
jQueryの設置の仕方が分からない方は下の記事の1.1-1.2を参考にしてください。超分かりやすいです。

クライアントワークでよくお世話になっているjQueryプラグインいろいろ

以上です。え？これだけでいいの？っていうくらい簡単に実装できました。わーい！よく分かってないけどかんたんー！（笑）

pointer.jsのカスタマイズ

pointer.jsは簡単に輪っかのおおきさ、出るスピード、色をカスタマイズすることができます。
カスタマイズ箇所は以下を参照してくださいな。

(function($){
	$.fn.pointer = function (options) {
		var settings = {
			size : 80,　/*輪っかの大きさ　数値が大きくなるほど輪っかも大きくなる*/
			spd : 300,　/*輪っかのでるスピード　数値が大きくなるほど遅くなります*/
			color : "#ccc"　/*輪っかの色　カラーコードで指定します*/
		}
		settings = $.extend(settings, options);

カスタマイズできる箇所

• size : 80,輪っかの大きさ　数値が大きくなるほど輪っかも大きくなる
• spd : 300,輪っかのでるスピード　数値が大きくなるほど遅くなります
• color : “#ccc”輪っかの色　カラーコードで指定します

数値をいじって、好みの輪っかにしてください。

ちなみに、メモメモでは、size:140;　spd:500;　color:#ffc3dd;と変更してみました。
結構雰囲気が変わりますね！

pointer.jsを実装してみた感想

想像してたより、かなり簡単なに実装できました。nejimaki-boxさんには感謝感謝です。

こういうちょっとした効果でクリックした場所の補助ができたり、なんか可愛いなって思えるのはとてもステキですね。
また、気なるものあったら積極的に試してみたいです。以上井畑でした！

pointer.js – クリックに楽しみを –

追記：クリックした点の中心のズレを修正する

nejimaki-boxさんよりステキな情報をいただきました。
現状のnejimaki-boxさんにあるjsをダウンロードしてそのまま使うと、クリックした場所より若干左下に「輪っか」の中心がきてしまいます。

これを修正するには、

var x = e.pageX-5;
var y = e.pageY-5;

var x = e.pageX-15;
var y = e.pageY-15;

としてください。
これでクリックした点と輪っかの中心が合います！

“[jQuery]クリックすると、ほわんと広がる輪っか。pointer.jsを実装してみた！” への3件のフィードバック

1. クリックするとほわわーんと輪っかを出してくれるjQueryプラグイン『Pointer.js』を実装！ より:

   2013/10/29 8:21 AM

   […] via：[jQuery]クリックすると、ほわんと広がる輪っか。pointer.jsを実装してみた！｜クリエイティブメモメモ […]

   返信
2. 画面をクリックすると輪っかが広がるjQuery、pointer.js より:

   2012/04/17 3:09 PM

   […] が合うそうです！ [jQuery]クリックすると、ほわんと広がる輪っか。pointer.jsを実装してみた！ -クリエイティブメモメモ […]

   返信
3. インフルエンザにはなりたくないぞ｜デイリー？オレイン！ver.20120206 | Olein より:

   2012/02/06 9:14 PM

   […] [jQuery]クリックすると、ほわんと広がる輪っか。pointer.jsを実装してみた！ …こんにちは。最近、布団から出られません。井畑です。 […]

   返信