Add Cool Effects to your Website

February 18, 2010

Recently I put my blog on under construction mode and added some effects. I got 3-4 emails from people asking how did I made that effects. Well I used some codes…

I will now tell you how to add these effects to your website. I don’t know if it will work on wordpress oe not because I haven’t tried it yet but it works fine in HTML Websites.

SNOW EFFECT:

To use this code first of all open the page (you wish to add effect on) in any editor.

Save any of the below images and upload to your server or anywhere on the web:

Or you can use your Picture.

Now paste the following code in <BODY> tag of your site.

<script type=”text/javascript”></p> <p>// This JavaScript code can be freely redistributed<br /> // as long as this copyright notice is keept unchanged.<br /> // This code is used on AS-IS basis and<br /> // you use it on your own risk. Author of this code<br /> // is not responsible for any damage that this<br /> // code may make.<br /> //<br /> // JS Snow v0.2<br /> // finished on 11-10-1999 23:04 in Zagreb, Croatia.<br /> // modified on 06-12-2005 11:20 in Zagreb, Croatia.<br /> //<br /> // Copyright 1999,2005 Altan d.o.o.<br /> // http://www.altan.hr/snow/index.html<br /> // E-mail: snow@altan.hr</p> <p>var no = 10; // snow number</p> <p>var dx, xp, yp; // coordinate and position variables<br /> var am, stx, sty; // amplitude and step variables<br /> var i, doc_width = 800, doc_height = 600;</p> <p>doc_width = document.body.clientWidth;<br /> doc_height = document.body.clientHeight;</p> <p>dx = new Array();<br /> xp = new Array();<br /> yp = new Array();<br /> am = new Array();<br /> stx = new Array();<br /> sty = new Array();</p> <p>for (i = 0; i < no; ++ i) {<br /> dx[i] = 0; // set coordinate variables<br /> xp[i] = Math.random()*(doc_width-50); // set position variables<br /> yp[i] = Math.random()*doc_height;<br /> am[i] = Math.random()*20; // set amplitude variables<br /> stx[i] = 0.02 + Math.random()/10; // set step variables<br /> sty[i] = 0.7 + Math.random(); // set step variables<br /> document.write(“<div id=\”dot”+ i +”\” style=\”POSITION: absolute; Z-INDEX: 10″+ i +”; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\”><img src=”<span style=”color: #ff0000;” mce_style=”color: #ff0000;”>YOUR-IMAGE-LOCATION</span>” border=\”0\”></div>”);<br /> }</p> <p>function snow() {<br /> for (i = 0; i < no; ++ i) { // iterate for every dot<br /> yp[i] += sty[i];<br /> if (yp[i] > doc_height-50) {<br /> xp[i] = Math.random()*(doc_width-am[i]-30);<br /> yp[i] = 0;<br /> stx[i] = 0.02 + Math.random()/10;<br /> sty[i] = 0.7 + Math.random();<br /> doc_width = document.body.clientWidth;<br /> doc_height = document.body.clientHeight;<br /> }<br /> dx[i] += stx[i];<br /> document.getElementById(“dot”+i).style.top = yp[i];<br /> document.getElementById(“dot”+i).style.left = xp[i] + am[i]*Math.sin(dx[i]);<br /> }<br /> setTimeout(“snow()”, 20);<br /> }</p> <p>snow();</p> <p></script><br />

Now Save the Page and you are done….

ANIMATED CLOCK:

Do the same thing you did earlier. Open the page and edit.

In the <BODY> tag paste the following Code:

<script language=”JavaScript”></p> <p>fCol=’444444′; //face colour.<br /> sCol=’FF0000′; //seconds colour.<br /> mCol=’444444′; //minutes colour.<br /> hCol=’444444′; //hours colour.</p> <p>YCbase=30; //Clock height.<br /> XCbase=30; //Clock width.</p> <p>H=’…’;<br /> H=H.split(”);<br /> M=’….’;<br /> M=M.split(”);<br /> S=’…..’;<br /> S=S.split(”);<br /> NS4=(document.layers);<br /> NS6=(document.getElementById&&!document.all);<br /> IE4=(document.all);<br /> Ypos=0;<br /> Xpos=0;<br /> cdots=12;<br /> Split=360/cdots;<br /> if (NS6){<br /> for (i=1; i < cdots+1; i++){<br /> document.write(‘<div id=”n6Digits’+i+’” style=”position:absolute;top:0px;left:0px;width:30px;height:30px;font-family:Arial;font-size:10px;color:#’+fCol+’;text-align:center;padding-top:10px”>’+i+’</div>’);<br /> }<br /> for (i=0; i < M.length; i++){<br /> document.write(‘<div id=”Ny’+i+’” style=”position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#’+mCol+’”></div>’);<br /> }<br /> for (i=0; i < H.length; i++){<br /> document.write(‘<div id=”Nz’+i+’” style=”position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#’+hCol+’”></div>’);<br /> }<br /> for (i=0; i < S.length; i++){<br /> document.write(‘<div id=”Nx’+i+’” style=”position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#’+sCol+’”></div>’);<br /> }<br /> }<br /> if (NS4){<br /> dgts=’1 2 3 4 5 6 7 8 9 10 11 12′;<br /> dgts=dgts.split(‘ ‘)<br /> for (i=0; i < cdots; i++){<br /> document.write(‘<layer name=nsDigits’+i+’ top=0 left=0 height=30 width=30><center><font face=Arial size=1 color=’+fCol+’>’+dgts[i]+’</font></center></layer>’);<br /> }<br /> for (i=0; i < M.length; i++){<br /> document.write(‘<layer name=ny’+i+’ top=0 left=0 bgcolor=’+mCol+’ clip=”0,0,2,2″></layer>’);<br /> }<br /> for (i=0; i < H.length; i++){<br /> document.write(‘<layer name=nz’+i+’ top=0 left=0 bgcolor=’+hCol+’ clip=”0,0,2,2″></layer>’);<br /> }<br /> for (i=0; i < S.length; i++){<br /> document.write(‘<layer name=nx’+i+’ top=0 left=0 bgcolor=’+sCol+’ clip=”0,0,2,2″></layer>’);<br /> }<br /> }<br /> if (IE4){<br /> document.write(‘<div style=”position:absolute;top:0px;left:0px”><div style=”position:relative”>’);<br /> for (i=1; i < cdots+1; i++){<br /> document.write(‘<div id=”ieDigits” style=”position:absolute;top:0px;left:0px;width:30px;height:30px;font-family:Arial;font-size:10px;color:’+fCol+’;text-align:center;padding-top:10px”>’+i+’</div>’);<br /> }<br /> document.write(‘</div></div>’)<br /> document.write(‘<div style=”position:absolute;top:0px;left:0px”><div style=”position:relative”>’);<br /> for (i=0; i < M.length; i++){<br /> document.write(‘<div id=y style=”position:absolute;width:2px;height:2px;font-size:2px;background:’+mCol+’”></div>’);<br /> }<br /> document.write(‘</div></div>’)<br /> document.write(‘<div style=”position:absolute;top:0px;left:0px”><div style=”position:relative”>’);<br /> for (i=0; i < H.length; i++){<br /> document.write(‘<div id=z style=”position:absolute;width:2px;height:2px;font-size:2px;background:’+hCol+’”></div>’);<br /> }<br /> document.write(‘</div></div>’)<br /> document.write(‘<div style=”position:absolute;top:0px;left:0px”><div style=”position:relative”>’);<br /> for (i=0; i < S.length; i++){<br /> document.write(‘<div id=x style=”position:absolute;width:2px;height:2px;font-size:2px;background:’+sCol+’”></div>’);<br /> }<br /> document.write(‘</div></div>’)<br /> }</p> <p>function clock(){<br /> time = new Date ();<br /> secs = time.getSeconds();<br /> sec = -1.57 + Math.PI * secs/30;<br /> mins = time.getMinutes();<br /> min = -1.57 + Math.PI * mins/30;<br /> hr = time.getHours();<br /> hrs = -1.57 + Math.PI * hr/6 + Math.PI*parseInt(time.getMinutes())/360;</p> <p>if (NS6){<br /> Ypos=window.pageYOffset+window.innerHeight-YCbase-25;<br /> Xpos=window.pageXOffset+window.innerWidth-XCbase-30;<br /> for (i=1; i < cdots+1; i++){<br /> document.getElementById(“n6Digits”+i).style.top=Ypos-15+YCbase*Math.sin(-1.56 +i *Split*Math.PI/180)<br /> document.getElementById(“n6Digits”+i).style.left=Xpos-15+XCbase*Math.cos(-1.56 +i*Split*Math.PI/180)<br /> }<br /> for (i=0; i < S.length; i++){<br /> document.getElementById(“Nx”+i).style.top=Ypos+i*YCbase/4.1*Math.sin(sec);<br /> document.getElementById(“Nx”+i).style.left=Xpos+i*XCbase/4.1*Math.cos(sec);<br /> }<br /> for (i=0; i < M.length; i++){<br /> document.getElementById(“Ny”+i).style.top=Ypos+i*YCbase/4.1*Math.sin(min);<br /> document.getElementById(“Ny”+i).style.left=Xpos+i*XCbase/4.1*Math.cos(min);<br /> }<br /> for (i=0; i < H.length; i++){<br /> document.getElementById(“Nz”+i).style.top=Ypos+i*YCbase/4.1*Math.sin(hrs);<br /> document.getElementById(“Nz”+i).style.left=Xpos+i*XCbase/4.1*Math.cos(hrs);<br /> }<br /> }<br /> if (NS4){<br /> Ypos=window.pageYOffset+window.innerHeight-YCbase-20;<br /> Xpos=window.pageXOffset+window.innerWidth-XCbase-30;<br /> for (i=0; i < cdots; ++i){<br /> document.layers["nsDigits"+i].top=Ypos-5+YCbase*Math.sin(-1.045 +i*Split*Math.PI/180)<br /> document.layers["nsDigits"+i].left=Xpos-15+XCbase*Math.cos(-1.045 +i*Split*Math.PI/180)<br /> }<br /> for (i=0; i < S.length; i++){<br /> document.layers["nx"+i].top=Ypos+i*YCbase/4.1*Math.sin(sec);<br /> document.layers["nx"+i].left=Xpos+i*XCbase/4.1*Math.cos(sec);<br /> }<br /> for (i=0; i < M.length; i++){<br /> document.layers["ny"+i].top=Ypos+i*YCbase/4.1*Math.sin(min);<br /> document.layers["ny"+i].left=Xpos+i*XCbase/4.1*Math.cos(min);<br /> }<br /> for (i=0; i < H.length; i++){<br /> document.layers["nz"+i].top=Ypos+i*YCbase/4.1*Math.sin(hrs);<br /> document.layers["nz"+i].left=Xpos+i*XCbase/4.1*Math.cos(hrs);<br /> }<br /> }</p> <p>if (IE4){<br /> Ypos=document.body.scrollTop+window.document.body.clientHeight-YCbase-20;<br /> Xpos=document.body.scrollLeft+window.document.body.clientWidth-XCbase-20;<br /> for (i=0; i < cdots; ++i){<br /> ieDigits[i].style.pixelTop=Ypos-15+YCbase*Math.sin(-1.045 +i *Split*Math.PI/180)<br /> ieDigits[i].style.pixelLeft=Xpos-15+XCbase*Math.cos(-1.045 +i *Split*Math.PI/180)<br /> }<br /> for (i=0; i < S.length; i++){<br /> x[i].style.pixelTop =Ypos+i*YCbase/4.1*Math.sin(sec);<br /> x[i].style.pixelLeft=Xpos+i*XCbase/4.1*Math.cos(sec);<br /> }<br /> for (i=0; i < M.length; i++){<br /> y[i].style.pixelTop =Ypos+i*YCbase/4.1*Math.sin(min);<br /> y[i].style.pixelLeft=Xpos+i*XCbase/4.1*Math.cos(min);<br /> }<br /> for (i=0; i < H.length; i++){<br /> z[i].style.pixelTop =Ypos+i*YCbase/4.1*Math.sin(hrs);<br /> z[i].style.pixelLeft=Xpos+i*XCbase/4.1*Math.cos(hrs);<br /> }<br /> }<br /> setTimeout(‘clock()’,100);<br /> }<br /> clock();<br /> //–><br /> </script></p> <p>Here you Go.</p> <p><span style=”text-decoration: underline;” mce_style=”text-decoration: underline;”><b><br /> </b></span></p> <p><span style=”text-decoration: underline;” mce_style=”text-decoration: underline;”><b>MOUSE TRAIL:</b></span>

Add a cool mouse trail in the website.

Again save the following image and upload and paste in code.

Now open the page and Paste the following code in <BODY> tag.

<script LANGUAGE=”JavaScript”><br /> <!–<br /> // image src<br /> var trailsrc = “YOUR-IMAGE-URL-HERE”;</p> <p>var nDots = 7;<br /> var Xbpos = 0;<br /> var Ybpos = 0;</p> <p>// fixed time step, no relation to real time<br /> var DELTAT = .01;<br /> // size of one spring in pixels<br /> var SEGLEN = 10;<br /> // spring constant, stiffness of springs<br /> var SPRINGK = 10;<br /> // all the physics is bogus, just picked stuff to make it look okay<br /> var MASS = 1;<br /> // Positive XGRAVITY pulls right, negative pulls left<br /> // Positive YGRAVITY pulls down, negative up<br /> var XGRAVITY = 0;<br /> var YGRAVITY = 50;<br /> // RESISTANCE determines a slowing force proportional to velocity<br /> var RESISTANCE = 10;<br /> // stopping criterea to prevent endless jittering<br /> // doesn’t work when sitting on bottom since floor<br /> // doesn’t push back so acceleration always as big<br /> // as gravity<br /> var STOPVEL = 0.1;<br /> var STOPACC = 0.1;<br /> var DOTSIZE = 11;<br /> // BOUNCE is percent of velocity retained when<br /> // bouncing off a wall<br /> var BOUNCE = 0.75;</p> <p>var ff=(document.getElementById&&!document.all);<br /> var ns=(document.layers);<br /> var ie=(document.all);</p> <p>// always on for now, could be played with to<br /> // let dots fall to botton, get thrown, etc.<br /> var followmouse = true;<br /> var dots = new Array();</p> <p>function init()<br /> {<br /> var i = 0;<br /> for (i = 0; i < nDots; i++) {<br /> dots[i] = new dot(i);<br /> }</p> <p>// set their positions<br /> for (i = 0; i < nDots; i++) {<br /> dots[i].obj.left = dots[i].X;<br /> dots[i].obj.top = dots[i].Y;<br /> }</p> <p>setTimeout(“startanimate()”, 10);<br /> }</p> <p>function dot(i)<br /> {<br /> this.X = Xbpos;<br /> this.Y = Ybpos;<br /> this.dx = 0;<br /> this.dy = 0;</p> <p>if (ns){<br /> document.write(“<layer id=\”mtrail”+ i +”\” ><img src=’”+trailsrc+”‘ border=\”0\”><\/layer>”);<br /> } else if (ie||ff) {<br /> if (i == 0) {<br /> document.write(“<div id=\”mtrail”+ i +”\” style=\”POSITION: absolute;z-index:999;VISIBILITY: hidden;\”><img src=’”+trailsrc+”‘ border=\”0\”><\/div>”);<br /> } else {<br /> document.write(“<div id=\”mtrail”+ i +”\” style=\”POSITION: absolute; z-index:999;\”><img src=’”+trailsrc+”‘ border=\”0\”><\/div>”);<br /> }<br /> }</p> <p>if (ie)<br /> {<br /> this.obj = eval(“mtrail” + i + “.style”);<br /> } else if (ff)<br /> {<br /> this.obj = document.getElementById(“mtrail” + i).style;<br /> }<br /> else<br /> {<br /> this.obj = eval(“document.mtrail” + i);<br /> }<br /> }</p> <p>function startanimate() {<br /> setInterval(“animate()”, 20);<br /> }</p> <p>// just save mouse position for animate() to use<br /> function MoveHandler(e)<br /> {<br /> if (ie) {<br /> Xbpos = window.event.clientX + document.body.scrollLeft;<br /> Ybpos = window.event.clientY + document.body.scrollTop;<br /> }<br /> else {<br /> Xbpos = e.pageX;<br /> Ybpos = e.pageY;<br /> }<br /> }</p> <p>function vec(X, Y)<br /> {<br /> this.X = X;<br /> this.Y = Y;<br /> }</p> <p>// adds force in X and Y to spring for dot[i] on dot[j]<br /> function springForce(i, j, spring)<br /> {<br /> var dx = (dots[i].X – dots[j].X);<br /> var dy = (dots[i].Y – dots[j].Y);<br /> var len = Math.sqrt(dx*dx + dy*dy);<br /> if (len > SEGLEN) {<br /> var springF = SPRINGK * (len – SEGLEN);<br /> spring.X += (dx / len) * springF;<br /> spring.Y += (dy / len) * springF;<br /> }<br /> }</p> <p>function animate() {<br /> // dots[0] follows the mouse,<br /> // though no dot is drawn there<br /> var start = 0;<br /> if (followmouse) {<br /> dots[0].X = Xbpos;<br /> dots[0].Y = Ybpos;<br /> start = 1;<br /> }</p> <p>for (i = start ; i < nDots; i++ ) {</p> <p>var spring = new vec(0, 0);<br /> if (i > 0) {<br /> springForce(i-1, i, spring);<br /> }<br /> if (i < (nDots – 1)) {<br /> springForce(i+1, i, spring);<br /> }</p> <p>// air resisitance/friction<br /> var resist = new vec(-dots[i].dx * RESISTANCE,<br /> -dots[i].dy * RESISTANCE);</p> <p>// compute new accel, including gravity<br /> var accel = new vec((spring.X + resist.X)/MASS + XGRAVITY,<br /> (spring.Y + resist.Y)/ MASS + YGRAVITY);</p> <p>// compute new velocity<br /> dots[i].dx += (DELTAT * accel.X);<br /> dots[i].dy += (DELTAT * accel.Y);</p> <p>// stop dead so it doesn’t jitter when nearly still<br /> if (Math.abs(dots[i].dx) < STOPVEL &&<br /> Math.abs(dots[i].dy) < STOPVEL &&<br /> Math.abs(accel.X) < STOPACC &&<br /> Math.abs(accel.Y) < STOPACC) {<br /> dots[i].dx = 0;<br /> dots[i].dy = 0;<br /> }</p> <p>// move to new position<br /> dots[i].X += dots[i].dx;<br /> dots[i].Y += dots[i].dy;</p> <p>// get size of window<br /> var height, width;<br /> if (!ie) {<br /> height = window.innerHeight + window.pageYOffset;<br /> width = window.innerWidth + window.pageXOffset;<br /> } else {<br /> height = document.body.clientHeight + document.body.scrollTop;<br /> width = document.body.clientWidth + document.body.scrollLeft;<br /> }</p> <p>// bounce off 3 walls (leave ceiling open)<br /> if (dots[i].Y >= height – DOTSIZE – 1) {<br /> if (dots[i].dy > 0) {<br /> dots[i].dy = BOUNCE * -dots[i].dy;<br /> }<br /> dots[i].Y = height – DOTSIZE – 1;<br /> }<br /> if (dots[i].X >= width – DOTSIZE) {<br /> if (dots[i].dx > 0) {<br /> dots[i].dx = BOUNCE * -dots[i].dx;<br /> }<br /> dots[i].X = width – DOTSIZE – 1;<br /> }<br /> if (dots[i].X < 0) {<br /> if (dots[i].dx < 0) {<br /> dots[i].dx = BOUNCE * -dots[i].dx;<br /> }<br /> dots[i].X = 0;<br /> }</p> <p>// move img to new position<br /> dots[i].obj.left = dots[i].X;<br /> dots[i].obj.top = dots[i].Y;<br /> }<br /> }</p> <p>init();<br /> if(ns)window.captureEvents(Event.MOUSEMOVE);<br /> document.onmousemove = MoveHandler;<br /> –><br /> </script>

Save the page and another cool effect.

Get Shareaholic

Similar Post:

Add Facebook “Like” to your Website in One Step [Super Quick Guide]

Search for More than 100,000 Quality Sound Effects and Music Loops – Free Download

Google Scribe – Type Before You Think!

Super Cool Collection of Google Doodles and its Tales

How to Add/Enable Extensions in Google Chrome: A Step by Step Guide

Article by Sukhjit Singh

Sukhjit has written 41 awesome articles for us. A windy night, a child was born, was strong as an ox + his hair stood on end.They said he was built for greatness but 17 years later he sits in front of his PC. pshhhhh Don't forget to Add me on Facebook or Visit my Gaming Arena at Xfire.

If you liked this post, you will definitely enjoy our others. Subscribe to the feed via RSS or EMAIL to get instantly updated for those awesome posts soon to come.

http://funpclife.blogspot.com/ Siddhu

Nice tricks bro… I liked the snow effects..
.-= Siddhu´s last blog ..Comodo releases its new browser – The Dragon =-.
http://www.loudable.com Suhasini

Thanks for this post but dont you think this kind of effects might affect website’s branding?
.-= Suhasini´s last blog ..Facebook Launches Privacy Control For Apps and Websites =-.

http://kiranruth.blogspot.com Ruth

Hey thats a cool share. I guess if u understand the javascript better we can do some real nice things..
.-= Ruth´s last blog ..Midnight Gyan and gibberish =-.

http://www.tech-hunter.co.cc Sukhjit Singh

Yeah! I wish I knew that stuff! Will learn it when I am free!
.-= Sukhjit Singh´s last blog ..Windows 8 Wishlist! =-.

http://www.tech-hunter.co.cc Sukhjit Singh

These effects may bother people where they are reading something or other! But we can post it on Under construction pages and other pages where people don’t read anything.
.-= Sukhjit Singh´s last blog ..Windows 8 Wishlist! =-.

http://www.techfreakstuff.com Rohit Sane

These are really cool effects. I had seen the snow effect on many blogs during Christmas and New year time. I wondered how this happened, but now I got it.
.-= Rohit Sane´s last blog ..How to create Good META Description tags for better SEO =-.

http://agentdeepak.com/ Agent Deepak

There is a WP plug-in to do so. Its Let it Snow.
.-= Agent Deepak´s last blog ..My 4 Golden Tips for Google Buzz =-.

http://www.tech-hunter.co.cc Sukhjit Singh

There maybe but it will be only for wordpress! Not other sites!
.-= Sukhjit Singh´s last blog ..Windows 8 Wishlist! =-.

http://techchunks.com TechChunks

Thanks for these HTML hacks. I will try to use the snow effect next Christmas!
.-= TechChunks´s last blog ..How Well Do You Know Google? (10 Questions Quiz) =-.
http://www.extremetrix.com Ankit

Snow effect is quite cool for Winter season. I tried it once.
.-= Ankit´s last blog ..[List] Apps that won’t let you get bore! =-.
http://www.misterkerthenrich.com Jimmy Popularis

I conceive this internet site holds very fantastic pent subject material blog posts.

Previous post: Facebook adds Application Privacy Settings

Next post: Organise your shorcuts in attractive manner

Blog Categories

Information Covered on the Blog

Recent Comments

Recent Posts

All Rights Reserved Chaaps.com