Javascript Effect For Text Ads In Your Website box effect in java script

web_designer · February 25, 2010

This effect in java script can be used in advertising; we can add it to texts or images in any where in websites. Put this code in head tag <head>

<script><!-- Beginning of JavaScript -// The width of your textbox (pixels). var textwidth=300// The height of your textbox (pixels). var textheight=150// Your messages. You may add as many messages as you like.var message=new Array()message[0]="phrase 1"message[1]=" phrase 2"message[2]=" phrase 3"message[3]=" phrase 4"message[4]=" phrase 5 " message[5]=" phrase 6"// the horizontal position of the box // If you set this to '-1' the textbox will centered in the middle of the browser-windowvar x_finalpos=-1// the vertical position of the box// If you set this to '-1' the textbox will centered in the middle of the browser-windowvar y_finalpos=50// numbers of the sliced columns of the boxvar x_slices=35// numbers of sliced rows of the boxvar y_slices=1// spped of the slicesvar pause=10// The width and heigth of the zone where the debris of the message are spread (pixels)var screenwidth=700var screenheight=500// Do not change the variables belowvar x_step=new Array()var y_step=new Array()var x_randompos=0var y_randompos=0var i_loop=0var max_loop=30var i_text=0var width_slice=Math.floor(textwidth/x_slices)var height_slice=Math.floor(textheight/y_slices)var cliptop=0var clipbottom=height_slicevar clipleft=0var clipright=width_slicevar spancounter=0function initiate() {if (x_finalpos==-1) {x_finalpos=Math.floor(document.body.clientWidth/2)-Math.floor(textwidth/2)}if (y_finalpos==-1) {y_finalpos=Math.floor(document.body.clientHeight/2)-Math.floor(textheight/2)}cliptop=0clipbottom=height_sliceclipleft=0clipright=width_slicei_loop=0spancounter=0if (document.all) {for (i=0;i<=y_slices-1;i++) {for (ii=0;ii<=x_slices-1;ii++) {var thisspan=eval("document.all.span"+spancounter+".style")x_randompos=Math.ceil(screenwidth*Math.random())y_randompos=Math.ceil(screenheight*Math.random())thisspan.posLeft=x_randomposthisspan.posTop=y_randomposthisspan.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"clipleft+=width_sliceclipright+=width_slicespancounter++}clipleft=0clipright=width_slicecliptop+=height_sliceclipbottom+=height_slice}}explode_IE()}function changetext() {spancounter=0for (i=0;i<=y_slices-1;i++) {for (ii=0;ii<=x_slices-1;ii++) {var thisspan=eval("document.all.span"+spancounter+".style") thisspan.posLeft=-5000spancounter++}}spancounter=0if (i_text>message.length-1) {i_text=0}for (i=0;i<=y_slices-1;i++) {for (ii=0;ii<=x_slices-1;ii++) {var thisinnerspan=eval("span"+spancounter)thisinnerspan.innerHTML=message[i_text]spancounter++}}i_text++initiate()}function explode_IE() {spancounter=0if (i_loop<=max_loop-1) {for (i=0;i<=y_slices-1;i++) {for (ii=0;ii<=x_slices-1;ii++) {var thisspan=eval("document.all.span"+spancounter+".style")x_step[spancounter]=(x_finalpos-thisspan.posLeft)/(max_loop-i_loop)y_step[spancounter]=(y_finalpos-thisspan.posTop)/(max_loop-i_loop) thisspan.posLeft+=x_step[spancounter]thisspan.posTop+=y_step[spancounter]spancounter++}}i_loop++var timer=setTimeout("explode_IE()",pause)}else {spancounter=0clearTimeout(timer)var timer=setTimeout("changetext()",2000)}}// - End of JavaScript - -->// here we can modify the properties of the box like font size, font color, border and box dimension</script><style>.spanstyle {position:absolute;left:-5000px;font-size : 24;font-family : Monotype Koufi;color : blue;text-align : center;background-color : ffffff;border-style : solid;padding : 2;width : 280;height : 90;}</style>

Now, put this code between body tag <body>

<script><!-- Beginning of JavaScript -if (document.all) {for (i=0;i<=y_slices-1;i++) {for (ii=0;ii<=x_slices-1;ii++) {document.write("<span id='span"+spancounter+"' class='spanstyle'></span>")spancounter++}}spancounter=0}// - End of JavaScript - --></script>

That's it, Have fun.

Sign In

Javascript Effect For Text Ads In Your Website box effect in java script

Recommended Posts

web_designer 7

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Important Information