jQuery.Twinkle DEMO leader22 Follow 2012-01-05 23:50:34 License: MIT License Fork9 Fav0 View7061 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 31 lines HTML 5 lines CSS 12 lines jQuery.Twinkle DEMO jQuery v1.7.1 /* * jQuery.twinkle 0.4 * http://larsjung.de/twinkle * * provided under the terms of the MIT License */ (function(a){"use strict";var b="_mp_api";a.ModPlug=a.ModPlug||{plugin:function(c,d){if(!c||a[c]||a.fn[c])return c?a[c]?2:3:1;var e={statics:{},methods:{},defaultStatic:undefined,defaultMethod:undefined},f=a.extend({},e,d),g=function(){var b,d;b=Array.prototype.slice.call(arguments),d=f.defaultStatic instanceof Function?f.defaultStatic.apply(this,b):f.defaultStatic;if(g[d]instanceof Function)return g[d].apply(this,b);a.error("Static method defaulted to '"+d+"' does not exist on 'jQuery."+c+"'")},h={},i=function(b){var d,e;if(h[b]instanceof Function)return d=Array.prototype.slice.call(arguments,1),h[b].apply(this,d);d=Array.prototype.slice.call(arguments),e=f.defaultMethod instanceof Function?f.defaultMethod.apply(this,d):f.defaultMethod;if(h[e]instanceof Function)return h[e].apply(this,d);a.error("Method '"+b+"' defaulted to '"+e+"' does not exist on 'jQuery."+c+"'")},j={addStatics:function(c){return a.extend(g,c),g[b]=j,this},addMethods:function(b){return a.extend(h,b),this}};return j.addStatics(f.statics).addMethods(f.methods),a[c]=g,a.fn[c]=i,0},module:function(c,d){if(!a[c]||!a[c][b])return a[c]?2:1;var e={statics:{},methods:{}},f=a.extend({},e,d);return a[c][b].addStatics(f.statics).addMethods(f.methods),0}}})(jQuery),function(a,b){"use strict";var c={widthRatio:.5,heightRatio:.5,delay:0,gap:0,effect:"splash",effectOptions:b,callback:b},d=function(a,b,c,d,e){this.offset={left:a,top:b},this.element=c,this.position={left:d,top:e}},e=function(){var b={};this.add=function(a){return b[a.id]||(b[a.id]=a),this},this.remove=function(a){return b[a]?delete b[a]:a.id&&b[a.id]&&delete b[a.id],this},this.twinkle=function(d,e){var f=a.extend({},c,e),g=b[f.effect];return g&&(d.element=d.element||"body",g.run(d,f.effectOptions,f.callback)),this},this.twinkleAtElement=function(b,e){var f=a.extend({},c,e),g=a(b),h=g.offset(),i=g.position(),j=g.outerWidth(!0),k=g.outerHeight(!0),l=h.left+j*f.widthRatio,m=h.top+k*f.heightRatio,n=i.left+j*f.widthRatio,o=i.top+k*f.heightRatio;return this.twinkle(new d(l,m,b,n,o),e)},this.twinkleAtElements=function(b,d){var e=this,f=a.extend({},c,d),g=f.delay,h=a(b),i=h.size();return h.each(function(b){var c=this,h=a.extend({},d);b!==i-1&&delete h.callback,setTimeout(function(){e.twinkleAtElement(c,h)},g),g+=f.gap}),this}},f=new e,g={statics:{twinkle:function(a,b,c,e){return f.twinkle(new d(0,0,a,b,c),e),this},add:function(a){return f.add(a),this},remove:function(a){return f.remove(a),this}},methods:{twinkle:function(a){return f.twinkleAtElements(this,a),this}},defaultStatic:function(){return"twinkle"},defaultMethod:function(){return"twinkle"}};a.ModPlug.plugin("twinkle",g)}(jQuery),function(a,b){"use strict";var c=function(a){return a.stopImmediatePropagation(),a.preventDefault(),!1},d=function(b,d,e,f){var g,h=function(){g.remove(),f instanceof Function&&f()},i=function(){g.animate({left:d.position.left-e.radius,top:d.position.top-e.radius,width:e.radius*2,height:e.radius*2,opacity:0},e.duration*.5,"linear",h)},j=function(){g=a("<div />").css(b).bind("click dblclick mousedown mouseenter mouseover mousemove",c),a(d.element).after(g),g.animate({left:d.position.left-e.radius*.5,top:d.position.top-e.radius*.5,width:e.radius,height:e.radius,opacity:1},e.duration*.5,"linear",i)};j()},e={color:"rgba(255,0,0,0.5)",radius:300,duration:1e3},f=function(){this.id="splash-css",this.run=function(b,c,f){var g=a.extend({},e,c),h={position:"absolute",zIndex:1e3,display:"block",borderRadius:g.radius,backgroundColor:g.color,boxShadow:"0 0 30px "+g.color,left:b.position.left,top:b.position.top,width:0,height:0,opacity:.4};d(h,b,g,f)}},g={color:"rgba(255,0,0,0.5)",radius:300,duration:1e3,width:2,count:3,delay:300},h=function(){this.id="drops-css",this.run=function(c,e,f){var h=a.extend({},g,e),i={position:"absolute",zIndex:1e3,display:"block",borderRadius:h.radius,border:""+h.width+"px solid "+h.color,left:c.position.left,top:c.position.top,width:0,height:0,opacity:.4},j=function(a,b){setTimeout(function(){d(i,c,h,b)},a)},k=0,l;for(l=0;l<h.count;l++)j(k,l===h.count-1?f:b),k+=h.delay}},i=function(){var b=new h;this.id="drop-css",this.run=function(c,d,e){b.run(c,a.extend(d,{count:1}),e)}};a.twinkle.add(new f),a.twinkle.add(new i),a.twinkle.add(new h)}(jQuery),function(a,b,c){var d=a.Twinkle=a.Twinkle||{},e=function(a){var b=a.getContext();b.beginPath(),this.fill=function(c){return b.fillStyle=c,b.fill(),a},this.stroke=function(c,d){return b.lineWidth=c,b.strokeStyle=d,b.stroke(),a},this.draw=function(b,c,d){return this.fill(d),this.stroke(b,c),a},this.circle=function(a,c,d){return b.arc(a,c,d,0,2*Math.PI,!1),this}};d.Ctx=function(a){if(!a||!a.canvas)return c;if(!(this instanceof d.Ctx))return new d.Ctx(a);var f=b(a.canvas).width(),g=b(a.canvas).height();this.getContext=function(){return a},this.getWidth=function(){return f},this.getHeight=function(){return g},this.clear=function(){return this.resetTransform(),a.clearRect(0,0,f,g),this},this.resetTransform=function(){return a.setTransform(1,0,0,1,0,0),this},this.translate=function(b,c){return a.translate(b,c),this},this.rotate=function(b){return a.rotate(Math.PI*b/180),this},this.opacity=function(b){return a.globalAlpha=b,this},this.path=function(){return new e(this)}}}(window,jQuery),function(a,b,c){var d=a.Twinkle=a.Twinkle||{};d.CanvasEffect=function(a,e,f,g,h){if(!(this instanceof d.CanvasEffect))return new d.CanvasEffect(a,e,f,g,h);var i=a.element,j=a.position.left,k=a.position.top,l={position:"absolute",zIndex:1e3,display:"block",left:j-e*.5,top:k-f*.5,width:e,height:f};this.run=function(a,j){var k,m,n,o=a/1e3*j,p=1/o,q=function(b){setTimeout(function(){m&&g({ctx:m,frac:b,millis:a*b})},a*b)},r=function(){k.remove(),k=c,m=c,h instanceof Function&&h()},s=function(a){return a.stopImmediatePropagation(),a.preventDefault(),!1};k=b("<canvas />").attr("width",e).attr("height",f).css(l),b(i).after(k),k.bind("click dblclick mousedown mouseenter mouseover mousemove",s),m=new d.Ctx(k.get(0).getContext("2d"));for(n=0;n<=o;n++)q(n*p);setTimeout(r,a)}}}(window,jQuery),function(a,b,c){"use strict";var d=a.Twinkle=a.Twinkle||{};d.Interpolator=function(a){var b,d=function(a){var b=1/(a.length-1),c=[],d;for(d=0;d<a.length;d++)c.push({x:b*d,y:a[d]});return c},e=function(a,b,c){var d=(b.y-a.y)/(b.x-a.x),e=a.y+d*(c-a.x);return e},f=function(a){for(var d=0;d<b.length;d++){if(d===0)continue;var e=b[d-1],f=b[d];if(a>=e.x&&a<=f.x)return[e,f]}return c};b=d(a),this.get=function(a){var b;return a=Math.max(0,Math.min(1,a)),b=f(a),e(b[0],b[1],a)}},d.Interpolator.scale=function(a,b,d){return b=b||1,d=d||0,a=(a-d)/b,a>=0&&a<=1?a:c}}(window,jQuery),function(a,b,c){"use strict";var d=a.Twinkle=a.Twinkle||{},e=function(){var a={color:"rgba(255,0,0,0.5)",radius:300,duration:1e3};this.id="splash",this.run=function(c,e,f){var g=b.extend({},a,e),h=g.radius*2,i=new d.Interpolator([.4,1,0]),j=new d.Interpolator([0,g.radius]),k=function(a){var b=j.get(a.frac),c=i.get(a.frac),d=a.ctx;d.clear().opacity(c).path().circle(d.getWidth()*.5,d.getHeight()*.5,b).fill(g.color)};(new d.CanvasEffect(c,h,h,k,f)).run(g.duration,25)}},f=function(){var a={color:"rgba(255,0,0,0.5)",radius:300,duration:1e3,width:2};this.id="drop",this.run=function(c,e,f){var g=b.extend({},a,e),h=g.radius*2,i=new d.Interpolator([.4,1,0]),j=new d.Interpolator([0,g.radius]),k=function(a){var b=j.get(a.frac),c=i.get(a.frac),d=a.ctx;d.clear().opacity(c).path().circle(d.getWidth()*.5,d.getHeight()*.5,b).stroke(g.width,g.color)};(new d.CanvasEffect(c,h,h,k,f)).run(g.duration,25)}},g=function(){var a={color:"rgba(255,0,0,0.5)",radius:300,duration:1e3,width:2,count:3,delay:100};this.id="drops",this.run=function(e,f,g){var h=b.extend({},a,f),i=h.radius*2,j=new d.Interpolator([.4,1,0]),k=new d.Interpolator([0,h.radius]),l=(h.duration-(h.count-1)*h.delay)/h.duration,m=h.delay/h.duration,n=function(a){var b,e,f,g,i=a.ctx,n=i.getWidth(),o=i.getHeight();i.clear();for(b=0;b<h.count;b++)e=d.Interpolator.scale(a.frac,l,m*b),e!==c&&(f=k.get(e),g=j.get(e),i.opacity(g).path().circle(n*.5,o*.5,f).stroke(h.width,h.color))};(new d.CanvasEffect(e,i,i,n,g)).run(h.duration,25)}},h=function(){var a={color:"rgba(255,0,0,0.5)",radius:100,duration:3e3};this.id="pulse",this.run=function(c,e,f){var g=b.extend({},a,e),h=g.radius*2,i=new d.Interpolator([0,1,.6,1,.6,1,0]),j=new d.Interpolator([0,g.radius,g.radius*.6,g.radius,g.radius*.6,g.radius,0]),k=function(a){var b=j.get(a.frac),c=i.get(a.frac),d=a.ctx;d.clear().opacity(c).path().circle(d.getWidth()*.5,d.getHeight()*.5,b).fill(g.color)};(new d.CanvasEffect(c,h,h,k,f)).run(g.duration,25)}},i=function(){var a={color:"rgba(255,0,0,0.5)",radius:100,duration:3e3,satellites:10,satellitesRadius:10,circulations:1.5};this.id="orbit",this.run=function(c,e,f){var g=b.extend({},a,e),h=g.radius*2,i=new d.Interpolator([.4,1,1,.4]),j=g.radius-g.satellitesRadius,k=new d.Interpolator([0,j,j,0]),l=function(a){var b=k.get(a.frac),c=i.get(a.frac),d=Math.PI*2*g.circulations*a.frac,e=a.ctx,f,h,j,l;e.clear().opacity(c).translate(e.getWidth()*.5,e.getHeight()*.5),f=e.path();for(h=0;h<g.satellites;h++)d+=Math.PI*2/g.satellites,j=Math.cos(d)*b,l=Math.sin(d)*b,f.circle(j,l,g.satellitesRadius);f.fill(g.color)};(new d.CanvasEffect(c,h,h,l,f)).run(g.duration,25)}};b.twinkle.add(new e),b.twinkle.add(new f),b.twinkle.add(new g),b.twinkle.add(new h),b.twinkle.add(new i)}(window,jQuery) // ↑は本家のコード。 // 書いたコードここから 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("#main_box").twinkle(e); } jQuery(function() { setInterval(c, 200)}); }); // 書いたコードここまで // 書いたコードここから// 書いたコードここから <div id="main_box"> <div id="inner_box">jQuery.Twinkle DEMO</div> </div> jQuery.Twinkle DEMO body { background-color: #fff; font: 30px sans-serif; } #main_box{width:100%;height:500px;text-align:center;} #inner_box{ height:50px; width:100%; font-weight:bold; font-size:15px; padding:15px; background-color:rgba(0,0,0,0.5); color:#fff; text-shadow:#0d0015 0 0 5px; } /* * jQuery.twinkle 0.4 * http://larsjung.de/twinkle * * provided under the terms of the MIT License */ (function(a){"use strict";var b="_mp_api";a.ModPlug=a.ModPlug||{plugin:function(c,d){if(!c||a[c]||a.fn[c])return c?a[c]?2:3:1;var e={statics:{},methods:{},defaultStatic:undefined,defaultMethod:undefined},f=a.extend({},e,d),g=function(){var b,d;b=Array.prototype.slice.call(arguments),d=f.defaultStatic instanceof Function?f.defaultStatic.apply(this,b):f.defaultStatic;if(g[d]instanceof Function)return g[d].apply(this,b);a.error("Static method defaulted to '"+d+"' does not exist on 'jQuery."+c+"'")},h={},i=function(b){var d,e;if(h[b]instanceof Function)return d=Array.prototype.slice.call(arguments,1),h[b].apply(this,d);d=Array.prototype.slice.call(arguments),e=f.defaultMethod instanceof Function?f.defaultMethod.apply(this,d):f.defaultMethod;if(h[e]instanceof Function)return h[e].apply(this,d);a.error("Method '"+b+"' defaulted to '"+e+"' does not exist on 'jQuery."+c+"'")},j={addStatics:function(c){return a.extend(g,c),g[b]=j,this},addMethods:function(b){return a.extend(h,b),this}};return j.addStatics(f.statics).addMethods(f.methods),a[c]=g,a.fn[c]=i,0},module:function(c,d){if(!a[c]||!a[c][b])return a[c]?2:1;var e={statics:{},methods:{}},f=a.extend({},e,d);return a[c][b].addStatics(f.statics).addMethods(f.methods),0}}})(jQuery),function(a,b){"use strict";var c={widthRatio:.5,heightRatio:.5,delay:0,gap:0,effect:"splash",effectOptions:b,callback:b},d=function(a,b,c,d,e){this.offset={left:a,top:b},this.element=c,this.position={left:d,top:e}},e=function(){var b={};this.add=function(a){return b[a.id]||(b[a.id]=a),this},this.remove=function(a){return b[a]?delete b[a]:a.id&&b[a.id]&&delete b[a.id],this},this.twinkle=function(d,e){var f=a.extend({},c,e),g=b[f.effect];return g&&(d.element=d.element||"body",g.run(d,f.effectOptions,f.callback)),this},this.twinkleAtElement=function(b,e){var f=a.extend({},c,e),g=a(b),h=g.offset(),i=g.position(),j=g.outerWidth(!0),k=g.outerHeight(!0),l=h.left+j*f.widthRatio,m=h.top+k*f.heightRatio,n=i.left+j*f.widthRatio,o=i.top+k*f.heightRatio;return this.twinkle(new d(l,m,b,n,o),e)},this.twinkleAtElements=function(b,d){var e=this,f=a.extend({},c,d),g=f.delay,h=a(b),i=h.size();return h.each(function(b){var c=this,h=a.extend({},d);b!==i-1&&delete h.callback,setTimeout(function(){e.twinkleAtElement(c,h)},g),g+=f.gap}),this}},f=new e,g={statics:{twinkle:function(a,b,c,e){return f.twinkle(new d(0,0,a,b,c),e),this},add:function(a){return f.add(a),this},remove:function(a){return f.remove(a),this}},methods:{twinkle:function(a){return f.twinkleAtElements(this,a),this}},defaultStatic:function(){return"twinkle"},defaultMethod:function(){return"twinkle"}};a.ModPlug.plugin("twinkle",g)}(jQuery),function(a,b){"use strict";var c=function(a){return a.stopImmediatePropagation(),a.preventDefault(),!1},d=function(b,d,e,f){var g,h=function(){g.remove(),f instanceof Function&&f()},i=function(){g.animate({left:d.position.left-e.radius,top:d.position.top-e.radius,width:e.radius*2,height:e.radius*2,opacity:0},e.duration*.5,"linear",h)},j=function(){g=a("<div />").css(b).bind("click dblclick mousedown mouseenter mouseover mousemove",c),a(d.element).after(g),g.animate({left:d.position.left-e.radius*.5,top:d.position.top-e.radius*.5,width:e.radius,height:e.radius,opacity:1},e.duration*.5,"linear",i)};j()},e={color:"rgba(255,0,0,0.5)",radius:300,duration:1e3},f=function(){this.id="splash-css",this.run=function(b,c,f){var g=a.extend({},e,c),h={position:"absolute",zIndex:1e3,display:"block",borderRadius:g.radius,backgroundColor:g.color,boxShadow:"0 0 30px "+g.color,left:b.position.left,top:b.position.top,width:0,height:0,opacity:.4};d(h,b,g,f)}},g={color:"rgba(255,0,0,0.5)",radius:300,duration:1e3,width:2,count:3,delay:300},h=function(){this.id="drops-css",this.run=function(c,e,f){var h=a.extend({},g,e),i={position:"absolute",zIndex:1e3,display:"block",borderRadius:h.radius,border:""+h.width+"px solid "+h.color,left:c.position.left,top:c.position.top,width:0,height:0,opacity:.4},j=function(a,b){setTimeout(function(){d(i,c,h,b)},a)},k=0,l;for(l=0;l<h.count;l++)j(k,l===h.count-1?f:b),k+=h.delay}},i=function(){var b=new h;this.id="drop-css",this.run=function(c,d,e){b.run(c,a.extend(d,{count:1}),e)}};a.twinkle.add(new f),a.twinkle.add(new i),a.twinkle.add(new h)}(jQuery),function(a,b,c){var d=a.Twinkle=a.Twinkle||{},e=function(a){var b=a.getContext();b.beginPath(),this.fill=function(c){return b.fillStyle=c,b.fill(),a},this.stroke=function(c,d){return b.lineWidth=c,b.strokeStyle=d,b.stroke(),a},this.draw=function(b,c,d){return this.fill(d),this.stroke(b,c),a},this.circle=function(a,c,d){return b.arc(a,c,d,0,2*Math.PI,!1),this}};d.Ctx=function(a){if(!a||!a.canvas)return c;if(!(this instanceof d.Ctx))return new d.Ctx(a);var f=b(a.canvas).width(),g=b(a.canvas).height();this.getContext=function(){return a},this.getWidth=function(){return f},this.getHeight=function(){return g},this.clear=function(){return this.resetTransform(),a.clearRect(0,0,f,g),this},this.resetTransform=function(){return a.setTransform(1,0,0,1,0,0),this},this.translate=function(b,c){return a.translate(b,c),this},this.rotate=function(b){return a.rotate(Math.PI*b/180),this},this.opacity=function(b){return a.globalAlpha=b,this},this.path=function(){return new e(this)}}}(window,jQuery),function(a,b,c){var d=a.Twinkle=a.Twinkle||{};d.CanvasEffect=function(a,e,f,g,h){if(!(this instanceof d.CanvasEffect))return new d.CanvasEffect(a,e,f,g,h);var i=a.element,j=a.position.left,k=a.position.top,l={position:"absolute",zIndex:1e3,display:"block",left:j-e*.5,top:k-f*.5,width:e,height:f};this.run=function(a,j){var k,m,n,o=a/1e3*j,p=1/o,q=function(b){setTimeout(function(){m&&g({ctx:m,frac:b,millis:a*b})},a*b)},r=function(){k.remove(),k=c,m=c,h instanceof Function&&h()},s=function(a){return a.stopImmediatePropagation(),a.preventDefault(),!1};k=b("<canvas />").attr("width",e).attr("height",f).css(l),b(i).after(k),k.bind("click dblclick mousedown mouseenter mouseover mousemove",s),m=new d.Ctx(k.get(0).getContext("2d"));for(n=0;n<=o;n++)q(n*p);setTimeout(r,a)}}}(window,jQuery),function(a,b,c){"use strict";var d=a.Twinkle=a.Twinkle||{};d.Interpolator=function(a){var b,d=function(a){var b=1/(a.length-1),c=[],d;for(d=0;d<a.length;d++)c.push({x:b*d,y:a[d]});return c},e=function(a,b,c){var d=(b.y-a.y)/(b.x-a.x),e=a.y+d*(c-a.x);return e},f=function(a){for(var d=0;d<b.length;d++){if(d===0)continue;var e=b[d-1],f=b[d];if(a>=e.x&&a<=f.x)return[e,f]}return c};b=d(a),this.get=function(a){var b;return a=Math.max(0,Math.min(1,a)),b=f(a),e(b[0],b[1],a)}},d.Interpolator.scale=function(a,b,d){return b=b||1,d=d||0,a=(a-d)/b,a>=0&&a<=1?a:c}}(window,jQuery),function(a,b,c){"use strict";var d=a.Twinkle=a.Twinkle||{},e=function(){var a={color:"rgba(255,0,0,0.5)",radius:300,duration:1e3};this.id="splash",this.run=function(c,e,f){var g=b.extend({},a,e),h=g.radius*2,i=new d.Interpolator([.4,1,0]),j=new d.Interpolator([0,g.radius]),k=function(a){var b=j.get(a.frac),c=i.get(a.frac),d=a.ctx;d.clear().opacity(c).path().circle(d.getWidth()*.5,d.getHeight()*.5,b).fill(g.color)};(new d.CanvasEffect(c,h,h,k,f)).run(g.duration,25)}},f=function(){var a={color:"rgba(255,0,0,0.5)",radius:300,duration:1e3,width:2};this.id="drop",this.run=function(c,e,f){var g=b.extend({},a,e),h=g.radius*2,i=new d.Interpolator([.4,1,0]),j=new d.Interpolator([0,g.radius]),k=function(a){var b=j.get(a.frac),c=i.get(a.frac),d=a.ctx;d.clear().opacity(c).path().circle(d.getWidth()*.5,d.getHeight()*.5,b).stroke(g.width,g.color)};(new d.CanvasEffect(c,h,h,k,f)).run(g.duration,25)}},g=function(){var a={color:"rgba(255,0,0,0.5)",radius:300,duration:1e3,width:2,count:3,delay:100};this.id="drops",this.run=function(e,f,g){var h=b.extend({},a,f),i=h.radius*2,j=new d.Interpolator([.4,1,0]),k=new d.Interpolator([0,h.radius]),l=(h.duration-(h.count-1)*h.delay)/h.duration,m=h.delay/h.duration,n=function(a){var b,e,f,g,i=a.ctx,n=i.getWidth(),o=i.getHeight();i.clear();for(b=0;b<h.count;b++)e=d.Interpolator.scale(a.frac,l,m*b),e!==c&&(f=k.get(e),g=j.get(e),i.opacity(g).path().circle(n*.5,o*.5,f).stroke(h.width,h.color))};(new d.CanvasEffect(e,i,i,n,g)).run(h.duration,25)}},h=function(){var a={color:"rgba(255,0,0,0.5)",radius:100,duration:3e3};this.id="pulse",this.run=function(c,e,f){var g=b.extend({},a,e),h=g.radius*2,i=new d.Interpolator([0,1,.6,1,.6,1,0]),j=new d.Interpolator([0,g.radius,g.radius*.6,g.radius,g.radius*.6,g.radius,0]),k=function(a){var b=j.get(a.frac),c=i.get(a.frac),d=a.ctx;d.clear().opacity(c).path().circle(d.getWidth()*.5,d.getHeight()*.5,b).fill(g.color)};(new d.CanvasEffect(c,h,h,k,f)).run(g.duration,25)}},i=function(){var a={color:"rgba(255,0,0,0.5)",radius:100,duration:3e3,satellites:10,satellitesRadius:10,circulations:1.5};this.id="orbit",this.run=function(c,e,f){var g=b.extend({},a,e),h=g.radius*2,i=new d.Interpolator([.4,1,1,.4]),j=g.radius-g.satellitesRadius,k=new d.Interpolator([0,j,j,0]),l=function(a){var b=k.get(a.frac),c=i.get(a.frac),d=Math.PI*2*g.circulations*a.frac,e=a.ctx,f,h,j,l;e.clear().opacity(c).translate(e.getWidth()*.5,e.getHeight()*.5),f=e.path();for(h=0;h<g.satellites;h++)d+=Math.PI*2/g.satellites,j=Math.cos(d)*b,l=Math.sin(d)*b,f.circle(j,l,g.satellitesRadius);f.fill(g.color)};(new d.CanvasEffect(c,h,h,l,f)).run(g.duration,25)}};b.twinkle.add(new e),b.twinkle.add(new f),b.twinkle.add(new g),b.twinkle.add(new h),b.twinkle.add(new i)}(window,jQuery) // ↑は本家のコード。 // 書いたコードここから 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("#main_box").twinkle(e); } jQuery(function() { setInterval(c, 200)}); }); // 書いたコードここまで // 書いたコードここから// 書いたコードここから <div id="main_box"> <div id="inner_box">jQuery.Twinkle DEMO</div> </div> body { background-color: #fff; font: 30px sans-serif; } #main_box{width:100%;height:500px;text-align:center;} #inner_box{ height:50px; width:100%; font-weight:bold; font-size:15px; padding:15px; background-color:rgba(0,0,0,0.5); color:#fff; text-shadow:#0d0015 0 0 5px; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author leader22 URLhttp://lealog.hateblo.jp/ こそこそ勉強します。 勉強ブログは、http://lealog.hateblo.jp/ Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/swqf/js"></script> jquery jquery_twinkle Discussion Questions on this code? Tags jquery jquery_twinkle Forked sort by latest page views favorite forked forked: jQuery.Twinkle DEMO focajun1 00 708 32/5/12 jquery jquery_twinkle forked: jQuery.Twinkle DEMO focajun1 00 641 32/5/12 jquery jquery_twinkle forked: jQuery.Twinkle DEMO kirosu 00 854 32/5/12 jquery jquery_twinkle 1 2 3NEXT>>
