»
EnglishFrenchVietnamese

Print - First longtext cursor trailer with fading out effect - JavaScriptBank.com

Full version: jsB@nk » Pointer » Trailer » First longtext cursor trailer with fading out effect
URL: https://www.javascriptbank.com/first-longtext-cursor-trailer-text-with-fading-out-effect.html

First longtext cursor trailer with fading out effect © JavaScriptBank.comCROSSBROWSER cursor trailer script that automatically generates a fading-out effect based upon the length of your trailing message. Unlike other trailor scripts this one operates with words rather than letters. This allows you to use longer messages without slowing down the script.

Full version: jsB@nk » Pointer » Trailer » First longtext cursor trailer with fading out effect
URL: https://www.javascriptbank.com/first-longtext-cursor-trailer-text-with-fading-out-effect.html



CSS
<STYLE>.spanstyle {FONT-FAMILY: Verdana; FONT-SIZE: 8pt; FONT-WEIGHT: bold; POSITION: absolute; TOP: -50px; VISIBILITY: visible}</STYLE><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


JavaScript
<SCRIPT>// CONFIGURATION:// 1.Delete the <DIV>block with the id "delethethisblock" // 2.Save the rest of the code as HTML-file.// 3. Configure font-size, font-family etc. inside the <style>-block// 4.   Configure the variables below.// Your trailing message.var message="FIRST LONGTEXT CURSOR TRAILER WITH FADING-OUT EFFECT! "message=message.split(" ")// Well, now comes the tricky part of the script! The only one! The variables// 'step' and 'stepbasic' configure the space between your words. Depending on // font-family and font-size you have to change their values by trial and error.var step=8 var stepbasic=8// Do not edit the varianles belowvar x,yvar flag=0var xpos=new Array()for (i=0;i<=message.length-1;i++) {xpos[i]=-100}var ypos=new Array()for (i=0;i<=message.length-1;i++) {ypos[i]=-100}var spacebetweenwords=new Array()for (i=0;i<=message.length-1;i++) {spacebetweenwords[i]=stepbasic+step*message[i].length-1}var colorstep=Math.round(255/message.length-1)var colorrgb=new Array()for (i=0;i<=message.length-1;i++) {colorrgb[i]=i*colorstep}var wordcolor=new Array()for (i=0;i<=message.length-1;i++) {    var colhex_left = Math.floor(colorrgb[i]/16)    var colhex_right= colorrgb[i]-(colhex_left*16)    if (colhex_left == 10) {colhex_left="A"}    if (colhex_left == 11) {colhex_left="B"}    if (colhex_left == 12) {colhex_left="C"}    if (colhex_left == 13) {colhex_left="D"}    if (colhex_left == 14) {colhex_left="E"}    if (colhex_left == 15) {colhex_left="F"}      if (colhex_right == 10) {colhex_right="A"}    if (colhex_right == 11) {colhex_right="B"}    if (colhex_right == 12) {colhex_right="C"}    if (colhex_right == 13) {colhex_right="D"}    if (colhex_right == 14) {colhex_right="E"}    if (colhex_right == 15) {colhex_right="F"}        wordcolor[i] =""+colhex_left+colhex_right}function handlerMM(e){x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientXy = (document.layers) ? e.pageY : document.body.scrollTop+event.clientYflag=1}function makesnake() {if (flag==1 && document.all) {    for (i=message.length-1; i>=1; i--) {   xpos[i]=xpos[i-1]+spacebetweenwords[i-1]ypos[i]=ypos[i-1]    }xpos[0]=x+stepbasicypos[0]=yfor (i=0; i<message.length-1; i++) {    var thisspan = eval("span"+(i)+".style")    thisspan.posLeft=xpos[i]thisspan.posTop=ypos[i]    }}else if (flag==1 && document.layers) {    for (i=message.length-1; i>=1; i--) {   xpos[i]=xpos[i-1]+spacebetweenwords[i-1]ypos[i]=ypos[i-1]    }xpos[0]=x+stepbasicypos[0]=yfor (i=0; i<message.length-1; i++) {    var thisspan = eval("document.span"+i)    thisspan.left=xpos[i]thisspan.top=ypos[i]    }}var timer=setTimeout("makesnake()",30)}</SCRIPT><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<BODY onload=makesnake()><SCRIPT><!-- Beginning of JavaScript -for (i=0;i<=message.length-1;i++) {    document.write("<span id='span"+i+"' class='spanstyle'>")document.write("<font color='"+wordcolor[i]+wordcolor[i]+wordcolor[i]+"'>"+message[i]+"</font>")    document.write("</span>")}if (document.layers){document.captureEvents(Event.MOUSEMOVE);}document.onmousemove = handlerMM;// - End of JavaScript - --></SCRIPT></body><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->