Maak een voort­gangs­balk­je met knip­pe­ren­de leds

Web Designer Magazine - - Lightbox Ouigo – Let’s Play -

Laat be­zoe­kers zien dat de con­tent aan het la­den is om te voor­ko­men dat ze er­van uit­gaan dat je web­si­te niet werkt

1. Pa­gi­na­struc­tuur

Be­gin met het Html-do­cu­ment. Dat be­staat uit de Html-con­tai­ner met daar­in de head en bo­dy. In de head-sec­tie wor­den de ex­ter­ne CSS- en Ja­vascrip­tre­sour­ces ge­la­den, ter­wijl de bo­dy-sec­tie de zicht­ba­re Html-in­houd be­vat. Die con­tent voeg je bij stap 2 toe aan de bo­dy-sec­tie.

2. Html-in­houd

De zicht­ba­re in­houd be­staat uit twee con­tent-con­tai­ners. In de eer­ste, main, zet je de in­houd van de pa­gi­na. De twee­de con­tai­ner heeft een ID waar­naar je in het Css-do­cu­ment ver­wijst. Hij heeft twee span-ele­men­ten waar­mee je de laad­balk maakt. Die span-ele­men­ten fun­ge­ren als voor- en ach­ter­grond van de laad­balk. <main>

<h1>main Con­tent</h1> </main> <div id=”loa­ding”> <span></span> <span></span> </div>

3. Start de CSS

Als het Html-do­cu­ment klaar is, maak je de sty­les­heet sty­les.css. In de eer­ste op­maak­re­gels stel je de bo­dy, HTML en laad­con­tai­ners zo in dat ze het vol­le­di­ge zicht­ba­re brow­ser­scherm in­ne­men. Ver­der stel je de stan­daard­kleu­ren voor de voor- en ach­ter­grond in en geef je een mar­gin en pad­ding van 0 op om even­tu­e­le ran­den te voor­ko­men. bo­dy,html, #loa­ding { dis­play: block; width: 100vw; height: 100vh; back­ground: #000; co­lor: #fff; pad­ding: 0; mar­gin: 0; }

4. Scha­kel­toe­stan­den

Je hebt op­maak­re­gels no­dig die aan­ge­ven hoe de hoofd­in­houd en laad­sec­ties tij­dens en na het la­den weer­ge­ge­ven wor­den. Maak de hoofd­in­houd stan­daard trans­pa­rant tot­dat er een ‘lo­a­ded’ klas­se op de bo­dy van het do­cu­ment is toe­ge­past – zie stap 9. De laad­con­tai­ner zal stan­daard zicht­baar zijn tot­dat de klas­se ‘lo­a­ded’ op de bo­dy van het do­cu­ment is toe­ge­past. bo­dy main{

tran­si­ti­on: opa­ci­ty 2s;

opa­ci­ty: 0; } bo­dy.lo­a­ded main{

opa­ci­ty: 1; } bo­dy.lo­a­ded #loa­ding{

dis­play: no­ne }

5. Laad­ele­men­ten

Elk ele­ment van de laad­balk be­staat uit een blok­ele­ment dat op de­zelf­de plaats is ge­zet en de­zelf­de hoog­te heeft. Po­si­ti­o­neer de ele­men­ten ab­so­luut ten op­zich­te van het scherm – je kunt dit ook ver­an­de­ren, zo­dat ze re­la­tief ten op­zich­te van een con­tent-con­tai­ner wor­den ge­plaatst. Het is be­lang­rijk dat je voor die ele­men­ten block-dis­play ge­bruikt, zo­dat je er spe­ci­fie­ke af­me­tin­gen voor kunt in­stel­len. #loa­ding > *{ dis­play: block; po­si­ti­on: ab­so­lu­te; top: 45vh; left: 0; height: 10vh; }

6. Maak een pa­troon

Om de laad­balk zo te ma­ken dat het lijkt als­of hij van led­ver­lich­ting is ge­maakt, heb je een over­lap­pend pa­troon no­dig. Dat maak je op www.pat­ter­ni­fy.com, waar je een pa­troon cre­ëert dat lijkt op het pa­troon in het screenshot hier­on­der. Daar­na ko­pi­eer je de ge­ge­vens uit de sec­tie ‘Ba­se64 Co­de’. Die ge­bruik je bij de vol­gen­de stap.

7. Op­maak van de balk

Je moet de twee ele­men­ten in de con­tai­ner van het laad­scherm op een spe­ci­fie­ke wij­ze vorm­ge­ven. Voor het eer­ste child-ele­ment, waar­naar je met nth-child (1) ver­wijst, heb je een ach­ter­grond­kleur­ver­loop met twee ani­ma­ties no­dig – de een voor het la­den van de voort­gang en de an­de­re voor het knip­pe­ren. Het twee­de child-ele­ment, waar­naar je met nth-child (2) ver­wijst, past het pa­troon toe dat je bij stap 6 ge­maakt hebt. #loa­ding > *:nth-child(1){

back­ground: li­near-gra­dient(to right, oran­ge, red);

ani­ma­ti­on: loa­ding in­fi­ni­te ea­se-out 5s, flash in­fi­ni­te ea­se-out 1s; } #loa­ding > *:nth-child(2){ /* MAAK JE BA­SE64-OVERLAP OP www.pat­ter­ni­fy.com */

back­ground: url( ** ZET JE BA­SE64-DA­TA HIER ** );

width: 100%; }

8. Ani­ma­ties de­fi­ni­ë­ren

Je past twee ani­ma­ties toe op de ele­men­ten van de laad­balk. De eer­ste ani­ma­tie is ‘loa­ding’, die de breed­te van de laad­balk ver­an­dert van nul tot de vol­le­di­ge breed­te. De ani­ma­tie ‘flash’ ver­an­dert de trans­pa­ran­tie en cre­ëert daar­mee de il­lu­sie van knip­pe­ren­de led­jes. Bij stap 7 heb je die ani­ma­ties al aan el­kaar ge­kop­peld. @-web­kit-key­fra­mes loa­ding{ from{ width: 0; } to{ width: 100%; } } @-web­kit-key­fra­mes flash{ from{ opa­ci­ty: 1; } 50%{ opa­ci­ty: 0.5; } to{ opa­ci­ty: 1; } }

9. Pa­ge­load-de­tec­tie

Maak een nieuw be­stand aan dat je co­de.js noemt. Daar­in zet je de Ja­vascript-co­de die de­tec­teert wan­neer de pa­gi­na klaar is met la­den. Om de weer­ga­ve van­uit CSS te kun­nen af­han­de­len, past Ja­vascript de klas­se ‘lo­a­ded’ op de bo­dy van het do­cu­ment toe wan­neer de pa­gi­na ge­la­den is. Voor test­doel­ein­den stel je met de va­ri­a­be­le ‘du­ra­ti­on’ een mi­ni­ma­le weer­ga­ve­tijd voor de ani­ma­tie in. var du­ra­ti­on = 5; var lo­a­ded = null; var lo­ad­lis­te­ner = func­ti­on(){

do­cu­ment.bo­dy.clas­s­na­me += “lo­a­ded”; } win­dow.set­ti­me­out(func­ti­on(){

if(lo­a­ded == true)lo­ad­lis­te­ner(); },du­ra­ti­on*1000); win­dow.ad­de­vent­lis­te­ner(“load”,func­ti­on(){ if(lo­a­ded == null)lo­a­ded = true; el­se lo­ad­lis­te­ner(); });

Newspapers in Dutch

Newspapers from Netherlands

© PressReader. All rights reserved.