Moving Insects Background in HTML/CSS

Just Copy Paste in html and see effect. 😆

<!DOCTYPE html>
<html>

<head>

    <meta charset='utf-8'>
    <title>Blog Header</title>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>

    <style type='text/css'>

        html, body, div, span, applet, object, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, acronym, address, big, cite, code,
        del, dfn, em, font, img, ins, kbd, q, s, samp,
        small, strike, strong, sub, sup, tt, var,
        b, u, i, center,
        dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td {
            margin: 0;
            padding: 0;
            border: 0;
            outline: 0;
            font-size: 100%;
            vertical-align: baseline;
            background: transparent;
            box-sizing: border-box;
        }

        body {
            overflow: hidden;
        }
        
        .clear {
            clear: both;
            height: 0;
            font-size: 0;
            line-height: 0;
        }

    </style>

    <script>

    	$(document).ready(function(){function F(F,t){return F*t/255}function t(){for(var t=0,E=w.length;E>t;t++){var e=w[t],C=0;if(y){var n=e.x-x.x,B=e.y-x.y;C=Math.sqrt(n*n+B*B)}e.vx+=.4*Math.random()-.2,e.vy+=.4*Math.random()-.2,e.vx*=e.speed,e.vy*=e.speed,C<e.radius&&y?(e.sx=x.x-e.radius*(x.x-e.x)/C,e.sy=x.y-e.radius*(x.y-e.y)/C,e.x+=(e.sx-e.x)/e.minSpeed+e.vx,e.y+=(e.sy-e.y)/e.minSpeed+e.vy):(e.x+=e.vx,e.y+=e.vy),e.x>c.right?(e.x=c.right,e.vX*=-1):e.x<c.left&&(e.x=c.left,e.vX*=-1),e.y>c.bottom?(e.y=c.bottom,e.vY*=-1):e.y<c.top&&(e.y=c.top,e.vY*=-1),p.setPixel(Math.round(e.x),Math.round(e.y),{R:e.color.R,G:e.color.G,B:e.color.B,A:e.color.A})}for(var a=0,o=g.length;o>a;a+=4)g[a+3]=F(A,g[a+3]);l.putImageData(p,0,0)}function E(F){x=n(f,F)}function e(F){y=!0}function C(F){y=!1}function n(F,t){var E=F.getBoundingClientRect();return{x:t.clientX-E.left,y:t.clientY-E.top}}function B(F){var t=parseInt(F,16);return{R:t>>16&255,G:t>>8&255,B:255&t,A:255}}var a=2400,A=253,o=["068481","90FEFB","48D1CC","01C5BB","20B2AA","457371","03A89E","45C3B8","99CDC9","40E0D0","36DBCA","353F3E","2A8E82","108070","DAF4F0","DBFEF8","2FAA96","4CB7A5","3E766D","4F8E83","4A766E","00FFCC","20BF9F","174038"],r=["A52A2A","8E2323","A62A2A","CD3333","CC3232","BE2625","8B1A1A","B22222","CD2626","DB2929","8C1717","EE2C2C","660000","800000","8B0000","CD0000","EE0000","A02422","E3170D","FC1501","CC1100","FF2400","FF5333","8A3324"],i=["FFB90F","FCB514","F0A804","FFB00F","FFAA00","FFA500","EE9A00","FFA812","FFA824","FF9912","FF8C00","ED9121","FF8600","DD7500","E38217","FF7F00","FF8000","EE7600","FFA54F","EE8833","FF7F24","EE7621","FF7216","FF6600","FF7722","FF6103","F87531","FF7D40","EE7942"],D=["7F00FF","551A8B","7D26CD","8A2BE2","912CEE","9B30FF","4B0082","BF5FFF","A020F0","5E2D79","BDA0CB","6B238E","68228B","9932CD","9932CC","9A32CD","B23AEE","660198","AA00FF","BF3EFF","820BBB","9400D3","5C246E","7A378B","B452CD","BA55D3","D15FEE","CC00FF","E066FF"],d=["FFE600","FBEC5D","F0E68C","D6C537","FFE303","FBDB0C","FFD700","EEC900","EEDD82","FFEC8B","FCDC3B","EEDC82","FEF1B5","FCD116","FFCC11","CDAB2D","E5BC3B","EDCB62","E6B426","FFC125","EEAD0E","CD950C","EEB422","DAA520","FFB90F","FEE5AC","FCB514","FFB00F","FFAA00"],s=["CDD704","98A148","CFD784","D1E231","AEBB51","A2BC13","B3C95A","859C27","CDE472","C8F526","414F12","668014","AADD00","BCE937","54632C","8BA446","A2C93A","BEE554","9CCB19","A2C257","698B22","79973F","6B8E23","99CC32","9ACD32","B3EE3A","C0FF3E","ADFF2F","385E0F"],u=["98F5FF","39B7CD","0EBFE9","C3E4ED","63D1F4","9AC0CD","50A6C2","ADD8E6","B2DFEE","00688B","0099CC","009ACD","00B2EE","00BFFF","BFEFFF","33A1C9","87CEEB","38B0DE","0BB5FF","42C0FB","6996AD","236B8E","3299CC","0198E1","5D92B1","82CFFD","67C8FF","4682B4","5CACEE"],h=[o,r,i,D,d,s,u],m=800,v=800,c={left:-1,top:-1,right:m+1,bottom:v+1},x={x:0,y:0},y=!1,f=document.createElement("canvas");f.setAttribute("width",m),f.setAttribute("height",v),f.addEventListener("mousemove",E),f.addEventListener("mousedown",e),f.addEventListener("mouseup",C),$(f).css("cursor","pointer"),document.getElementById("effect").appendChild(f);var l=f.getContext("2d"),p=l.getImageData(0,0,m,v),g=p.data;p.getPixel=function(F,t){var E=4*(F+t*this.width);return{R:this.data[E],G:this.data[E+1],B:this.data[E+2],A:this.data[E+3]}},p.setPixel=function(F,t,E){var e=4*(F+t*this.width);this.data[e]=E.R,this.data[e+1]=E.G,this.data[e+2]=E.B,this.data[e+3]=E.A};for(var w=[],M=h[Math.floor(Math.random()*h.length)],R=0;a>R;R++){var b={};b.x=Math.round(Math.random()*m),b.y=Math.round(Math.random()*v),b.vx=0,b.vy=0,b.sx=0,b.sy=0,b.radius=200*Math.random()+25,b.speed=.06*Math.random()+.93,b.minSpeed=.1,b.color=B(M[Math.floor(Math.random()*M.length)]),w.push(b)}window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(F){window.setTimeout(F,1e3/60)}}(),function q(){requestAnimFrame(q),t()}()});
        
    </script>

</head>

<body style='background-color:#111' >

    <div id='holder' style='background-color:#000; width:800px; height:800px; position:relative'>

        <div id='effect' style='position:absolute; width:800px; height:800px;'></div>
        

    </div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Blog Header</title>

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, font, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-size: 100%;

vertical-align: baseline;

background: transparent;

box-sizing: border-box;

}

body {

overflow: hidden;

}

.clear {

clear: both;

height: 0;

font-size: 0;

line-height: 0;

}

</style>

$(document).ready(function(){function F(F,t){return F*t/255}function t(){for(var t=0,E=w.length;E>t;t++){var e=w[t],C=0;if(y){var n=e.x-x.x,B=e.y-x.y;C=Math.sqrt(n*n+B*B)}e.vx+=.4*Math.random()-.2,e.vy+=.4*Math.random()-.2,e.vx*=e.speed,e.vy*=e.speed,C<e.radius&&y?(e.sx=x.x-e.radius*(x.x-e.x)/C,e.sy=x.y-e.radius*(x.y-e.y)/C,e.x+=(e.sx-e.x)/e.minSpeed+e.vx,e.y+=(e.sy-e.y)/e.minSpeed+e.vy):(e.x+=e.vx,e.y+=e.vy),e.x>c.right?(e.x=c.right,e.vX*=-1):e.x<c.left&&(e.x=c.left,e.vX*=-1),e.y>c.bottom?(e.y=c.bottom,e.vY*=-1):e.y<c.top&&(e.y=c.top,e.vY*=-1),p.setPixel(Math.round(e.x),Math.round(e.y),{R:e.color.R,G:e.color.G,B:e.color.B,A:e.color.A})}for(var a=0,o=g.length;o>a;a+=4)g[a+3]=F(A,g[a+3]);l.putImageData(p,0,0)}function E(F){x=n(f,F)}function e(F){y=!0}function C(F){y=!1}function n(F,t){var E=F.getBoundingClientRect();return{x:t.clientX-E.left,y:t.clientY-E.top}}function B(F){var t=parseInt(F,16);return{R:t>>16&255,G:t>>8&255,B:255&t,A:255}}var a=2400,A=253,o=["068481","90FEFB","48D1CC","01C5BB","20B2AA","457371","03A89E","45C3B8","99CDC9","40E0D0","36DBCA","353F3E","2A8E82","108070","DAF4F0","DBFEF8","2FAA96","4CB7A5","3E766D","4F8E83","4A766E","00FFCC","20BF9F","174038"],r=["A52A2A","8E2323","A62A2A","CD3333","CC3232","BE2625","8B1A1A","B22222","CD2626","DB2929","8C1717","EE2C2C","660000","800000","8B0000","CD0000","EE0000","A02422","E3170D","FC1501","CC1100","FF2400","FF5333","8A3324"],i=["FFB90F","FCB514","F0A804","FFB00F","FFAA00","FFA500","EE9A00","FFA812","FFA824","FF9912","FF8C00","ED9121","FF8600","DD7500","E38217","FF7F00","FF8000","EE7600","FFA54F","EE8833","FF7F24","EE7621","FF7216","FF6600","FF7722","FF6103","F87531","FF7D40","EE7942"],D=["7F00FF","551A8B","7D26CD","8A2BE2","912CEE","9B30FF","4B0082","BF5FFF","A020F0","5E2D79","BDA0CB","6B238E","68228B","9932CD","9932CC","9A32CD","B23AEE","660198","AA00FF","BF3EFF","820BBB","9400D3","5C246E","7A378B","B452CD","BA55D3","D15FEE","CC00FF","E066FF"],d=["FFE600","FBEC5D","F0E68C","D6C537","FFE303","FBDB0C","FFD700","EEC900","EEDD82","FFEC8B","FCDC3B","EEDC82","FEF1B5","FCD116","FFCC11","CDAB2D","E5BC3B","EDCB62","E6B426","FFC125","EEAD0E","CD950C","EEB422","DAA520","FFB90F","FEE5AC","FCB514","FFB00F","FFAA00"],s=["CDD704","98A148","CFD784","D1E231","AEBB51","A2BC13","B3C95A","859C27","CDE472","C8F526","414F12","668014","AADD00","BCE937","54632C","8BA446","A2C93A","BEE554","9CCB19","A2C257","698B22","79973F","6B8E23","99CC32","9ACD32","B3EE3A","C0FF3E","ADFF2F","385E0F"],u=["98F5FF","39B7CD","0EBFE9","C3E4ED","63D1F4","9AC0CD","50A6C2","ADD8E6","B2DFEE","00688B","0099CC","009ACD","00B2EE","00BFFF","BFEFFF","33A1C9","87CEEB","38B0DE","0BB5FF","42C0FB","6996AD","236B8E","3299CC","0198E1","5D92B1","82CFFD","67C8FF","4682B4","5CACEE"],h=[o,r,i,D,d,s,u],m=800,v=800,c={left:-1,top:-1,right:m+1,bottom:v+1},x={x:0,y:0},y=!1,f=document.createElement("canvas");f.setAttribute("width",m),f.setAttribute("height",v),f.addEventListener("mousemove",E),f.addEventListener("mousedown",e),f.addEventListener("mouseup",C),$(f).css("cursor","pointer"),document.getElementById("effect").appendChild(f);var l=f.getContext("2d"),p=l.getImageData(0,0,m,v),g=p.data;p.getPixel=function(F,t){var E=4*(F+t*this.width);return{R:this.data[E],G:this.data[E+1],B:this.data[E+2],A:this.data[E+3]}},p.setPixel=function(F,t,E){var e=4*(F+t*this.width);this.data[e]=E.R,this.data[e+1]=E.G,this.data[e+2]=E.B,this.data[e+3]=E.A};for(var w=[],M=h[Math.floor(Math.random()*h.length)],R=0;a>R;R++){var b={};b.x=Math.round(Math.random()*m),b.y=Math.round(Math.random()*v),b.vx=0,b.vy=0,b.sx=0,b.sy=0,b.radius=200*Math.random()+25,b.speed=.06*Math.random()+.93,b.minSpeed=.1,b.color=B(M[Math.floor(Math.random()*M.length)]),w.push(b)}window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(F){window.setTimeout(F,1e3/60)}}(),function q(){requestAnimFrame(q),t()}()});

</script>

</head>

</div>

</body>

</html>

Leave a Reply Cancel reply