jQueryもほんの少しですが書けるようになりました。
なにより、大抵のプラグインが自分のサイトに楽勝で導入できるようになった感動はひとしお！
というわけで、日本語の解説がまったく見つからなかったこのjQuery.twinkleの使い方をこそっとメモ。
ドイツのLars Jung (lrsjng) さんという方のプラグインです。
とってもかわいいのでオススメです。
設置する
<script src="http://blog.lealog.net/wp-content/themes/blog.lealog/js/jquery.js"></script> <script src="http://blog.lealog.net/wp-content/themes/blog.lealog/js/twinkle.js"></script>
おなじみなので言うことなし。
装飾系のスクリプトなので、閉じるbodyタグの直前でも良いかもしれません。
動かす
$(selector).twinkle();
上記サイトにあるように、ぽわわーんとさせたいものを指定するだけ。
ただこれだけ書くと、読み込まれた瞬間ぽわーんで終了です。
寂しいです・・。
$(function(){
$(selector).click(function(){
$(selector).twinkle();
});
});
いつも通りのイベントハンドラで好きな時にぽわわーんです。
オプションをつける
var options = {
"effect": "drop",
"effectOptions": {
"color": "rgba(0,0,255,0.5)",
"radius": 100
}
};
$(selector).twinkle(options);
詳しくはURL参照なのですが、オプション設定でよりそれらしくなります。
オプションには、
- widthRatio
- heightRatio
- delay
- gap
- effect
- effectOptions
- callback
これだけ設定できます。
エフェクトの種類
以上、8種類のエフェクトがあります。
ぽわわーんをcanvasではなくcss3で表現する場合は、-cssとついたものを指定します。
css3の方が気のせいか軽い感じです。
無難なsplashがやっぱかわいいなぁ。
エフェクトのオプション
↑の.twinkleの挙動に対してのオプションのほか、effectOptions内では、
- color
- radius
- duration
- delay
- count (effect:drops/drops-cssの時のみ？)
- width (effect:drops/drops-cssの時のみ？)
- satellites (effect:orbitの時のみ？)
- satellitesRadius (effect:orbitの時のみ？)
- circulations (effect:orbitの時のみ？)
といったオプションでぽわわーんをカスタマイズできます。
他にもEventを設定できたりオブジェクトのAddやRemoveもできるらしいのですが、難しくてわかりません。(きっと誰かが・・
effectOptionsの中と外で、同じ内容でも挙動が変わるのかどうかとかもイマイチわかりません・・。