JavaScript – textové intro
Intro je na některých stránkách nezbytnou součástí, je ale rozumné ho tam mít, když se dlouho načítá? Odpovědí je právě textové intro. Kromě toho by textové intro mohlo být dobrým zpestřením, mezi všemi těmi Flashi. Na následujících řádkách vám ukáži, jak na to.
Níže v textu uvádím jednotlivé části kódu intra, jehož výslednou podobu si můžete také vyzkoušet on-line. Kód je velmi jednoduchý a vcelku přehledný, myslím, že nebudete mít problém si přizpůsobit písma, barvy, rychlosti nebo samotný text. A samozřejmě i pozadí celého intra – můžete například využít nějaký obrázek, tím se ale částečně zbavíte výhod malého objemu a vysoké rychlosti načítání. Skript jsem pro jednoduchost rozdělil na několik částí, u kterých rozeberu jednotlivé modifikovatelné parametry podrobněji.
Upozorňuji, že intro je tvořeno JavaScriptem, nelze tedy zaručit jeho funkčnost ve všech prohlížečích, lze jej však uzpůsobit tak, aby si návštěvník s vypnutým JavaScriptem ničeho ani nevšiml.
<html>
<head>
<style type=“text/css“>
.clDivs {position:absolute; width:30px; height:30px; left:0px; font-size:30px; font-weight:bold; font-family:verdana helvetica,sans-serif; color:#000000; visibility:hidden;}
</style>
<script language=“JavaScript“>
V této části lze změnit téměř vše – druh, barva a velikost písma, šířka a výška intra, zarovnání a další, přitom vám zcela postačí minimální znalosti CSS. Je to taková ovládací centrála celého intra.
<!–
function lib_bwcheck(){ //zjisteni typu browseru
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=(navigator.userAgent.indexOf(„Opera“)>-1 && document.getElementById)?1:0
this.ie5=(this.ver.indexOf(„MSIE 5“)>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf(„MSIE 6“)>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf(„Mac“)>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
return this
}
var bw=lib_bwcheck()
numberOfLetters=8 //kolik písmen
V této části, která se zabývá převážně browser sniffingem, je z uživatelského hlediska podstatný parametr numberOfLetters. Ten určuje, kolik bude písmen v textu (nezapomeňte i na mezery, také se počítají).
ypos=-100 //Y pozice pismen, relativne ke stredu
xpos=new Array()
xpos[0] = -180
xpos[1] = -150
xpos[2] = -120
xpos[3] = -90
xpos[4] = -60
xpos[5] = -30
xpos[6] = 1
xpos[7] = 30
xpos[8] = 60
xpos[9] = 90
xpos[10] = 120
testing=0
animation=1
aspeed=10 //Rychlost
function makeObj(obj,speed,xmove,ymove,works){
this.el=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?document.layers[obj]:0;
this.css=bw.dom || bw.ie4?this.el.style:bw.ns4?this.el:0;
this.moveIt=b_moveIt;
}
V této části kódu se pomocí sady parametrů určuje pozice intra. Pro nás je ovšem podstatná nenápadná proměnná aspeed, která určuje rychlost pohybu písmen v intru.
var px = bw.ns4 || window.opera?““:“px“;
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x+px; this.css.top=this.y+px;}
var posArray,oZdivs;
function introInit(){
pageXcenter = bw.op5 || bw.ns4 || bw.ns6?innerWidth/2:document.body.offsetWidth/2
pageYcenter = bw.op5 || bw.ns4 || bw.ns6?innerHeight/2:document.body.offsetHeight/2
oZdivs = new Array()
for(var i=0; i<numberOfLetters; i++){
oZdivs[i] = new makeObj(‚div’+i)
oZdivs[i].moveIt(-200,0)
oZdivs[i].css.visibility = „visible“
}
if (animation==4) animation = Math.round(Math.random()*2)+1
if (!testing) eval(‚anim’+animation+'(0)‘)
else testIt()
}
function testIt(){
alert(pageYcenter)
for(var i=0; i<oZdivs.length; i++){
oZdivs[i].moveIt((pageXcenter+xpos[i]),(pageYcenter+ypos))
}
}
xPath1 = new Array(-277, -271, -264, -255, -245, -234, -223, -210, -196, -181, -161, -134, -98, -52, 1, 53, 98, 131, 151, 156, 147, 124, 92, 59, 0)
yPath1 = new Array(-240, -206, -162, -114, -64, -16, 29, 71, 112, 151, 187, 217, 241, 255, 260, 254, 239, 213, 179, 143, 108, 77, 51, 30, 0)
function anim1(num,test){
if (num<oZdivs.length){
st = test?test:0;
animX(num,’xPath1′,’yPath1′,aspeed,st,’anim1(‚+(num+1)+‘,’+st+‘)‘)
}else endanim(0)
}
function animX(divnum,arrayX,arrayY,speed,num,fn){
arrayXr = new Array(); arrayYr = new Array()
arrayXr = eval(arrayX); arrayYr = eval(arrayY)
arrayX = „‚“+arrayX+“‚“; arrayY = „‚“+arrayY+“‚“
if (num<arrayXr.length){
oZdivs[divnum].moveIt(arrayXr[num]+(pageXcenter+xpos[divnum]),arrayYr[num]+(pageYcenter+ypos))
num ++;
setTimeout(„animX(„+divnum+“, „+arrayX+“, „+arrayY+“, „+speed+“, „+num+“, ‚“+fn+“‚)“, speed)
}else eval(fn)
}
function endanim(num){
if (num<oZdivs.length){
oZdivs[num].css.visibility = „hidden“ //skryvani divu
num ++
setTimeout(„endanim(„+num+“)“,300)
}else{
}
}
onload = introInit;
Nejdelší část kódu obsahuje všechny podstatné funkce, z hlediska uživatele ovšem nejde o nic podstatného, nic se zde nedá upravovat. To následující část je mnohem zajímavější:
</script>
</head>
<body>
<div id=“div0″ class=“clDivs“>V</div>
<div id=“div1″ class=“clDivs“>á</div>
<div id=“div2″ class=“clDivs“>š</div>
<div id=“div3″ class=“clDivs“> </div>
<div id=“div4″ class=“clDivs“>t</div>
<div id=“div5″ class=“clDivs“>e</div>
<div id=“div6″ class=“clDivs“>x</div>
<div id=“div7″ class=“clDivs“>t</div>
</body>
</html>
Podle toho, jak dlouhý chcete mít text v intru, si navolíte písmenka. Já jsem postavil na každý řádek jeden znak (jako samostatný znak se počítá i mezera). Nic vám ovšem nebrání rozdělit text třeba do skupin po třech znacích, které se potom budou pohybovat společně. Nesmíte ovšem zapomenout upravit velikost proměnné numberOfLetters tak, aby odpovídala počtu použitých divů (pozor, první řádek má číslo 0, jak je při programování zvykem).
A tím máme vše hotovo. Přeji vám hodně zábavy a úspěchů při zdokonalování tohoto jednoduchého principu. Pokud vás napadne něco zajímavého, stačí kontaktovat redakci Intervalu.
Starší komentáře ke článku
Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.
