Bølgetekst
En bølge løber igennem teksten, så den nærmest hopper på
linien. Mulighed for sjove farveeffekter.
Der er indstillingsmuligheder i scriptet, så du selv kan tilpasse det
til dine egne sider.
Sådan gør du:
Koden består af to scripts. Det
første script indsættes i dit head og det andet indsættes, der
hvor teksten skal være.
Trin 1
Indsæt dette script i din
<head> sektion:
<script language="JavaScript1.2">
<!-- Javascript BØLGETEKST starter her
//Script fra @-beynder - http://www.a-begynder.dk
//Vi har næsten alt til web ... blandt andet ;-)
//Gratis script. Slet venligst ikke vores reference
//-------------------------------------------------
//Skriv teksten her (mindst syv tegn)
message="Skriv din tekst
her"
//Definer tekstfarver
var color1="#000000" //grundfarve
var color2="#999999" //bølgefarve
//Definer fonten
var skrifttype="verdana"
var fontsize="18px"
//Definer hastighed (højere = hurtigere)
var speed=60
//I NS6? kan du slå animationen fra (0 er fra)
ns6switch=1
//// Du skal IKKE ændre noget efter denne linie ////
////////////////////////////////////////////////////
var ns6=document.getElementById&&!document.all
mes=new Array();
mes[0]=-1;
mes[1]=-4;
mes[2]=-7;mes[3]=-10;
mes[4]=-7;
mes[5]=-4;
mes[6]=-1;
num=0;
num2=0;
txt="";
function jump0(){
if (ns6&&!ns6switch){
jump.innerHTML=message
return
}
if(message.length > 6){
for(i=0; i != message.length;i++){
//http://www.a-begynder.dk
txt=txt+"<span style='color:"+color1+"; position:relative;' id='n"+i+"'>"+message.charAt(i)+"</span>"};
jump.innerHTML=txt;
txt="";
jump1a()
}
else{
alert("Your message is to short")
}
}
function jump1a(){
nfinal=(document.getElementById)? document.getElementById("n0")
: document.all.n0
nfinal.style.left=-num2;
if(num2 != 9){
num2=num2+3;
setTimeout("jump1a()",speed)
}
else{
jump1b()
}
}
function jump1b(){
nfinal.style.left=-num2;
if(num2 != 0){num2=num2-3;
setTimeout("jump1b()",speed)
}
else{
jump2()
}
}
function jump2(){
txt="";
for(i=0;i != message.length;i++){
if(i+num > -1 && i+num < 7){
//http://www.a-begynder.dk
txt=txt+"<span style='color:"+color2+";
position:relative;top:"+mes[i+num]+"'>"+
message.charAt(i)+"</span>"
}
else{txt=txt+"<span>"+message.charAt(i)+"</span>"}
}
jump.innerHTML=txt;
txt="";
if(num != (-message.length)){
num--;
setTimeout("jump2()",speed)}
else{num=0;
setTimeout("jump0()",speed)}}
// javascript slutter her -->
</script>
Definer selv værdierne markeret
med rødt.
Trin 2
Herefter indsættes dette
script, der hvor teksten skal være:
<script>
<!-- Javascript starter her
document.write("<div id='jumpx' style='font-family:"+skrifttype+",sans-serif;
font-size:"+fontsize+";color:"+color1+"'></div>")
if (document.all||document.getElementById){
jump=(document.getElementById)? document.getElementById("jumpx")
: document.all.jumpx
jump0()
}
else
document.write(message)
// javascript slutter her -->
</script>
Du skal ikke ændre noget i
denne del.
Eksempel:
Hint:
I det første script skal du definere to
forskellige farver.
Du kan vælge at sætte farverne ens, så vil test
og animation have samme farve.
Du kan også prøve at lege lidt med farverne. Man
kan opnå en flot (sjov) effekt ved at vælge anden farve i en
lysere nuance end den første.
Til toppen >> |
