Startsidan

Java och applets

Ajax

XML oxh XSLT

Forum

Gästbok

Våra tjänster

Javascript

• Javascript i dag -inledning
• Dom - Document object model
• Dom - Hemliga länkar
• Formulärkomponenter
• Morphning av bilder

Animeringar

• Textvågen

Javascript och stilar

• Kalendern

Vågen

Visst är det väl fantastiskt vad man kan åstadkomma med javascript i våra moderna webbläsare.
I den här animationen skapas dynamiskt lika många block, som det finns bokstäver i AlesnaWebbSystem. Varje block tilldelas en egen stil, där bland annat fontstorleken ändras enligt en algoritm som följer en cos/sinuskurva.
Koden till blocken lagras i variabel benämnd text. När text är färdigproducerad så fylls innehållet i ett annat block (den med en ram på) med värdet av text. Eftersom beräkningar ock omritningar sker med en intervall av 75 millisekunder, så skapas en illusion av en vågrörelse bland bokstäverna.
Funktionen som sköter om animeringen heter animate och anropas första gången från händelsehanteraren onLoad i bodyinstruktionen. Sedan körs processen igång med: setTimeout("animate();",75);.

Koden

<script>
str = "AlesnaWebbSystem";
size=20;
rot=1;
	
function animate()
{
text="";
	for(i=str.length-1;i>-1;i--)
	{
	size = 20 * Math.cos(rot)+30;
	clr = Math.abs(Math.round(100 * Math.cos(rot)+30));
	size =Math.abs( Math.round(size));
	text+="<div id=a"+i+" style=\"float:right;font-size:"+size+"px;color:rgb(0,0,"+clr+");\">\n";
	text+=str.substring(i,i+1);
	text+="</div>\n";
	rot+= (3.14*2)/15;
	}
document.getElementById("ANIMATION").innerHTML=text;
setTimeout("animate();",75);
}
</script>
			

Just de ja, man skulle ju ha ett block att skriva ut bokstavsblocken i också.

<div id="ANIMATION"></div>

Och detta block ska ju rimligen stilmallas också-

<style>
	#ANIMATION{float:left;width:290px;height:60px;border: solid 1px rgb(0,0,0);}
</style>

© AlesnaWebbSystem