●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
Blob space Graphic Effect - Ash Princess Kawaii
Breaking News
28 November 2014
Home » Free Javascript » Blob space Graphic Effect

Blob space Graphic Effect

November 28, 2014
Blob+space+Graphic+Effect


Colorful Polkadot Animated is pretty cute blog effect. Namely the colorful dots and movements such as resonance.

Here's the script


<script type="text/javascript">
// <![CDATA[
var colsel=new Array('#edf', '#dbf', '#c9f', '#b7f', '#a5f', '#93f'); // colours for animation - last colour is the 'background'
var speed=100; // speed of animation, lower is faster

/***************************\
* Blob space Graphic Effect*
*  ashprincesskawaii.blogspot.co.id  *
* DON'T EDIT BELOW THIS BOX *
\***************************/

window.onload=whizzy;
var div;
var ring=new Array();
var swide=screen.width;
var shigh=screen.height;
var count=0;
var roun=0;
var nour=0;
function whizzy() {
 var i, dvs;
 div=document.createElement('div');
 dvs=div.style;
 dvs.position='fixed';
 dvs.left='50%';
 dvs.top='50%';
 dvs.width='1px';
 dvs.height='1px';
 dvs.overflow='visible';
 dvs.zIndex='-1';
 i=document.body.style.backgroundColor;
 if (document.body.parentNode) {
  if (i) document.body.parentNode.style.backgroundColor=i;
  document.body.style.backgroundColor="transparent";
 }
 document.body.insertBefore(div, document.body.firstChild);
 for (i=0; i<30; i++) ring['col'+i]=new Array();
 add_blobs();
 zoomer();
}

function add_blobs() {
    var f, h, i, j, k, w;
 for (i=50; i<swide*1.5;) {
  f=Math.floor(10+140*(i/swide)); // from 10 to 150
  ring['row'+count]=new Array();
  for (j=0; j<30; j++) {
    h=-f/8+i/2*Math.cos(Math.PI*j/15);
    w=f/5+i/2*Math.sin(Math.PI*j/15);
    if (h-f/2>shigh/2 || h+f/2<-shigh/2 || w-f/2>swide/2 || w+f/2<-swide/2) continue;
    k=document.createElement('div');
    dvs=k.style;
    dvs.position='absolute';
    dvs.left=w-f/2+'px';
    dvs.top=h-f/2+'px';
    dvs.color=colsel[colsel.length-1];
    k.appendChild(document.createTextNode(String.fromCharCode(9679)));
    k.style.fontSize=f+'px';
    ring['row'+count][j]=k;
    ring['col'+j][count]=k;
    div.appendChild(k);
  }
  count++;
  i+=f*2;
 }
 nour=count;
}

function zoomer() {
   for (var i=0; i<30; i++) {
     var tc=Math.abs(-nour+roun)%(count-2);
     if (tc<colsel.length && ring['col'+i][roun]) ring['col'+i][roun].style.color=colsel[tc];
   }
   if (++roun==count) {
     roun=0;
  nour++;
  setTimeout('zoomer()', speed);
   }
   else zoomer();
}
// ]]>
</script>

Live demo on this page. You can change the color as you wish. Enjoy!
By
Tags

0 Comments:

Posting Komentar

:) :)) ;(( :-) =)) ;( ;-( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (b) (f) x-) (k) (h) (c) cheer
Click to see the code!
To insert emoticon you must added at least one space before the code.

Langganan: Posting Komentar (Atom)
 
tumblr_ln1i6xM1bx1qg9aa7