🧊

jQuery.Twinkleを背景のアクセントとして使うコード

今までブログの背景にあててたのですが、やっぱりちょっと重いので外すことに。
このエフェクト好きやねんけどなぁ・・・。

jQuery.Twinkle DEMO - jsdo.it - share JavaScript, HTML5 and CSS

こうやって埋めれるのは便利やね。
また使いたくなったらスグ使えるし!

jQuery.Twinkle

ぽわーんエフェクトが素敵なプラグイン。
前に紹介してます。

参考:[jQuery][JavaScript]jQuery.twinkleがとてもかわいい

背景いっぱいにぽわーん

ブログの背景とか、ランディングページとか、何かと目を引くので使えるんではないかと。

JavaScript

// jQueryと、jQuery.Twinkleは読み込んでおいてから・・・。

jQuery(function(){
var b = 0,
c = function() {
	var c = ["rgba(39,74,120,0.3)", "rgba(0,148,200,0.2)", "rgba(193,228,233,0.4)", "rgba(22,94,131,0.3)", "rgba(15,35,80,0.2)", "rgba(74,72,142,0.1)"],
	    d = c[b++ % c.length],
	    e = {
	        widthRatio: Math.random(),
		heightRatio: Math.random(),
		effect: "splash-css",
		effectOptions: {
			radius: 200,
			duration: 1e3 + Math.random() * 1e3,
			color: d
		}
};
	jQuery("#hogehoge").twinkle(e);
};

jQuery(function() {
	setInterval(c, 200)});
});

はい、お察しの通りわたくしめの技術では、こんなコード書けません。

参考:jQuery.twinkle · larsjung.de

ソースより拝借。
まいどまいどデバッグツールさまにはお世話になってます。