Jump to content



Welcome to KnowledgeSutra - Dear Guest , Please Register here to get Your own website. - Ask a Question / Express Opinion / Reply w/o Sign-Up!
- - - - -

Javascript Effect For Text Ads In Your Website


No replies to this topic

#1 web_designer

    "french rose sparkle under moonlight"...do you believe in the magic of moonlight??!!...

  • Kontributors
  • PipPipPipPipPipPipPipPipPipPipPip
  • 1,385 posts
  • Gender:Female
  • Location:US, CA
  • Interests:internet and the web
    reading books
    sport
    watching tv series
    drawings and art
  • myCENT:12.10
  • Spam Patrol

Posted 25 February 2010 - 01:08 PM

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-window
var 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-window
var y_finalpos=50

// numbers of the sliced columns of the box
var x_slices=35

// numbers of sliced rows of the box
var y_slices=1

// spped of the slices
var pause=10

// The width and heigth of the zone where the debris of the message are spread (pixels)
var screenwidth=700
var screenheight=500

// Do not change the variables below
var x_step=new Array()
var y_step=new Array()
var x_randompos=0
var y_randompos=0
var i_loop=0
var max_loop=30
var i_text=0
var width_slice=Math.floor(textwidth/x_slices)
var height_slice=Math.floor(textheight/y_slices)
var cliptop=0
var clipbottom=height_slice
var clipleft=0
var clipright=width_slice
var spancounter=0

function 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=0
clipbottom=height_slice
clipleft=0
clipright=width_slice
i_loop=0
spancounter=0

if (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_randompos
thisspan.posTop=y_randompos
thisspan.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
clipleft+=width_slice
clipright+=width_slice
spancounter++
}

clipleft=0
clipright=width_slice
cliptop+=height_slice
clipbottom+=height_slice
}
}
explode_IE()
}

function changetext() {
spancounter=0
for (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=-5000
spancounter++
}
}

spancounter=0

if (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=0
if (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=0
clearTimeout(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.




Reply to this topic


This post will need approval from a moderator before this post is shown.

  


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users