Een mooie intro met gedeeltelijke transparantie in de letters. Alles is simpel aan te passen en staat meegeschreven in het script.
Plaats onderstaande code tussen de <head> tags van je pagina:
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/> <style> v\:* { behavior: url(#default#VML); } </style>
<script> //script gevonden bij http://www.anouksweb.nl // Vul zoveel boodschappen in als je wilt var message=new Array("Haaiiii Webdesigner", "Een apart effect is dit zeg !", "Verbaas je bezoeker met deze intro", "en.. zet deze site bij je favorieten", "Have fun !") // de kleur van de buitenste lijn var outlinecolor=new Array("white", "black") var fillcolor1=new Array("white", "green","blue", "green") var fillcolor2=new Array("black", "black","yellow", "olive" ) // De letter die de cirkel gebruikt als afscheiding var circlemark=new Array("~") // de breedte van de buitenlijn var strkweight=2 // de wachttijd tussen de boodschappen var pause=2 // Stel hier de sterkte in van de opacity (transparantie van de letters) var strengthopacity="60%" // de grootte van de cirkel (waardes van 0.1 to 1) var circlesize=0.8 // hierna niets meer aanpassen var outerwidth=document.body.clientWidth var outerheight=document.body.clientHeight var innerwidth=Math.floor(circlesize*outerwidth) var innerheight=Math.floor(circlesize*outerheight) var posleft=(outerwidth-innerwidth)/2 var postop=(outerheight-innerheight)/2 var path=new Array() var i_message=0 var i_outlinecolor=0 var i_fillcolor1=0 var i_fillcolor2=0 var i_messagelength=0 var longestmessage=0 pause*=1000 var ie=document.getElementById&&document.all?1:0 for (i=0;i<=message.length-1;i++) { if (message[i].length>longestmessage) { longestmessage=message[i].length } longestmessage+=4 } for (i=0;i<=message.length-1;i++) { var emptyspace="" var i_emptyspace=(longestmessage-message[i].length)/2 for (ii=0;ii<=i_emptyspace;ii++) { emptyspace+=circlemark } message[i]=emptyspace+" "+message[i]+" "+emptyspace } function changeform() { if (i_outlinecolor >= outlinecolor.length) {i_outlinecolor=0} if (i_fillcolor1 >= fillcolor1.length) {i_fillcolor1=0} if (i_fillcolor2 >= fillcolor2.length) {i_fillcolor2=0} document.getElementById('strokeid').color=outlinecolor[i_outlinecolor] document.getElementById('fillid').color=fillcolor1[i_fillcolor1] document.getElementById('fillid').color2=fillcolor2[i_fillcolor2] if (i_message < message.length) {tick()} else {document.getElementById('textpathid').string=""} } function tick() { if (i_messagelength <= message[i_message].length) { var messagestringend="" var messagestring=message[i_message].substring(0, i_messagelength)+messagestringend document.getElementById('textpathid').string=messagestring var timer=setTimeout("tick()",50) i_messagelength++ } else { clearTimeout(timer) i_messagelength=0 i_message++ i_outlinecolor++ i_fillcolor1++ i_fillcolor2++ var timer=setTimeout("changeform()",pause) } } if (ie) { document.write('<div id="roofid" style="position:absolute;left:0px;top:0px;width:'+outerwidth+'px;height:'+outerheight+'px;overflow:hidden;">') document.write('<v:oval id="tc" style="position:absolute;top:'+postop+';left:'+posleft+';width:'+innerwidth+';height:'+innerheight+'">') document.write('<v:shadow on="t" opacity="'+strengthopacity+'"/>') document.write('<v:stroke id="strokeid" weight="'+strkweight+'pt" color="blue"/>') document.write('<v:fill id="fillid" on="True" color="'+fillcolor1[0]+'" color2="'+fillcolor2[0]+'" opacity="'+strengthopacity+'" opacity2="'+strengthopacity+'" type="gradient"/>') document.write('<v:path textpathok="t"/>') document.write('<v:textpath id="textpathid" on="t" id="mytp" style="font-family:\'Arial Black\'; " fitpath="t" string=""/>') document.write('</v:oval>') window.onload=changeform } </script>