Tech­niek

Web Designer Magazine - - Webworkshop -

1. Div-struc­tuur

Be­gin met het ma­ken van een Div-struc­tuur die de tekst in het mid­den van het scherm zet. Ab­so­lu­te po­si­ti­o­ne­ring is le­lijk, dat klopt, maar voor­lo­pig ge­bruik je die voor de tekst die je een beet­je scheef zet. <div id=”item1” sty­le=” width:100%; height:100%”> <div sty­le=”po­si­ti­on: ab­so­lu­te; top:50%; left:50%;”>

<span sty­le=”font-si­ze:32; flo­at:left; width:150px; height:50px; mar­gin-top:-25px; mar­gin-left:-300px;”>le­vi­ta­ting</span>

<span sty­le=”font­si­ze:32; flo­at:left; trans­form:ro­ta­te(180deg); mar­gin:32 0 0 0; width:150px; height:50px;”>up­wards</span>

</div> </div>

2. Maak een round-ro­bin bu fer

Maak een aan­tal van de­ze di­vs met ver­schil­len­de na­men om wat va­ri­a­tie in de pre­sen­ta­tie te krij­gen. Daar­na maak je een zo­ge­naam­de round-ro­bin bu er. Met zo’n da­ta­struc­tuur, die vaak in elek­tro­ni­ca ge­bruikt wordt, be­weeg je heel mak­ke­lijk door de ele­men­ten heen. </div> <script> (func­ti­on(){ win­dow.rrin­dex=0; win­dow.rr­buf­fer= [null,null,null]; win­dow.rr­buf­fer[0]=do­cu­ment. ge­tele­ment­by­id(“item1”); . . . se­t­in­ter­val(func­ti­on(){ // hi­de win­dow.rrin­dex++; if(win­dow.rrin­dex==3)win­dow.rrin­dex=0;

// show },5000); })(); </script> </bo­dy>

3. In- en uit­fa­den

De twee com­men­ta­ren met het la­bel ‘show’ en ‘ hi­de’ zijn tij­de­lij­ke aan­dui­din­gen die niets doen. Daar­om ver­vang je ze door wat Css-co­de die de ele­men­ten in- en uit­fa­det . <head> <sty­le ty­pe=”text/css”> .vis{

Newspapers in Dutch

Newspapers from Netherlands

© PressReader. All rights reserved.