Webdesign 101 » Dynamisk HTML » Clip-egenskaben

Praktisk brug af CLIP-egenskaben

I denne artikel sætter jeg prikken over i'et ved at demonstrere, hvorledes du ved hjælp af noget JavaScript kan bruge CLIP-egenskaben til nogle dynamiske effekter.

Demonstrationen herover skulle være tydelig nok. Jeg bruger det script, jeg præsenterede på foregående side, en hel masse gange efter hinanden til at beskære de 4 kanter. Det grundlæggende script til denne lille øvelse er dette:

function wipeRight(){
  if (clipTal('box2','l')<275) {
    clipMed('box2',0,0,0,5)
    setTimeout("wipeRight()",30)
  }
}

Når du gentagne gange skal gøre et eller andet ved en egenskab hos HTML-elementet, hvad enten det er at flytte elementet, eller som her beskære det, er det nødvendigt før hvert trin i forløbet af finde ud af, hvordan egenskaben har det, før du foretager dig noget.

I dette tilfælde sker det ved at bruge clipTal-funktionen, som jeg præsenterede på foregående side, for finde clip-værdien for den aktuelle kant på elementet. Hvis denne værdi er mindre end 275 for venstre kant, udfører scriptet funktionen clipMed() på den måde, at der lægges 5 til clip-værdien for venstre kant. Når det er sket, sættes setTimeout()-funktionen til at gentage processen efter 30 millisekunders forløb.

Når betingelsen i 2. linie ikke længere er opfyldt - det vil sige når clipTal-værdien af venstre kant når op på 275 pixel - standser løkken.

Til denne demoside har jeg lavet en reset-funktion, der bringer eksemplet tilbage til normaltilstanden:

function reset(){
  clipTil('box2',0,275,184,0)
}

For en ordens skyld gengiver jeg herunder den tilsvarende funktion wipeLeft(), fordi der her er et tilfælde, hvor du skal reducere clipTal()-værdien. Det sker, som du ser, ved at trække de 5 pixel fra clipTal()-værdien:

function wipeLeft() {
  if (clipTal('box2','r')>0) {
    clipMed('box2',0,-5,0,0)
    setTimeout("wipeLeft()",30)
  }
}

Som det fremgår af demo'en, kan du gøre det samme for alle kanter. Det, jeg synes er lidt vanskeligt her, er i virkeligheden at holde styr på, hvornår, der skal lægges til og trækkes fra. Det er i hvert fald ikke noget, jeg har lyst til at sysle med søndag morgen. På andre tidspunkter er jeg faktisk også nødt til at tage papir og blyant til hjælp.

Træk gardiner fra

Denne demo (som du må kigge på et et separat browservindue: Clip-demo) er lidt af samme surdej, som du vil opdage, når du prøver funktionerne af.

Det, der sker her, er at billedet af stjernehimlen er skåret i to lige store dele og placeret i hver sin div. Så kan jeg manipulere med hver halvdel som jeg behager, eller - som de to sidste eksempler viser - med begge dele på én gang.

De to første funktioner er næsten identiske med dem, jeg anvendte i den første demo. Det er kun den maksimale clip-værdi for hhv. venstre og højre kant der er anderledes. De to sidste funktioner er en smule vanskeligere, men her er den funktion, der trækker fra i begge sider:

function wipeBoth(){
  if (clipTal('box4','l')<137) {
    clipMed('box4',0,0,0,3)
    setTimeout("wipeGardinLeft()",30)
  }
}
function wipeGardinLeft(){
  if (clipTal('box3','r')>0) {
    clipMed('box3',0,-3,0,0)
    setTimeout("wipeBoth()",30)
  }
}

Videre perspektiver

Nu har jeg i disse demoer brugt billeder både som det underliggende og det, der dækker. Men der er ikke det ringeste i vejen for at droppe billederne og blot bruge effekten på to lige store lag, der ligger oven på hinanden.

Et andet af perspektiverne i denne demo er, at det med dynamisk HTML kan lade sig gøre at lave overblændingseffekter der uskelnelige fra dem, du ellers kan lave med Microsofts blendTrans- og revealTrans-filtre. (Se evt. demo på websiden Overblændingsfiltre). Problemet med disse er jo, at de kun virker i Internet Explorer.

Med lidt omhu kan det lade sig gøre at lave en wipe()- eller close()-funktion, der beskærer 4 sider på én gang, og dermed få et rektangel, der åbner sig eller lukker sig. Ligeledes kan det - igen med lidt omhu - lade sig gøre at bruge effekten på mindre dele af billedet, således at du f.eks. kan lave en persienne-effekt.

Stylesheet, Javascript og billeder vedr. denne webside har jeg samlet i en zip-fil, du kan downloade. Bruger du dette materiale, skal du huske på, at clip-arealet for hver kasse skal sættes inline, således (eksempel):

<div id="box2" 
style="clip:rect(0px 275px 184px 0px;)">
<img src="stjerner.jpg" 
alt="Øverste billede" 
width="275" height="184" border="0">
</div>

Oprettet: 17. januar 2003
Senest opdateret: 20. maj 2003