Tech­niek

Web Designer Magazine - - Webworkshop -

1. Html-do­cu­ment

In de head-sec­tie van het Html-do­cu­ment­zet je in­for­ma­tie die het do­cu­ment be­schrijft en links naar ex­ter­ne bron­nen – in dit ge­val een Css-be­stand en een Javascript be­stand. In de bo­dy-sec­tie komt de zicht­ba­re in­houd, die je bij de vol­gen­de stap toe­voegt. <!DOCTYPE html> <html> <head> <tit­le>sten­cil Lo­a­der</tit­le> <link rel=”sty­les­heet” ty­pe=”text/css” href=”sty­les.css” /> <script ty­pe=”text/javascript” src=”co­de.js”></script> </head> </bo­dy> </html>

2. Na­vi­ga­tie-html

De in­houd van de pa­gi­na be­staat uit het laad­scherm en de con­tent die ver­schijnt na­dat de pa­gi­na ge­la­den is. Het laad­scherm heeft een div-con­tai­ner met daar­in een span met het te­ken ‘8’. Je kunt dat te­ken ver­van­gen door el­ke tekst die je wilt. Die con­tai­ner maak je la­ter op met CSS om hem met de ge­wens­te sty­le en ani­ma­tie weer te ge­ven. <nav> <div><span>8</span></div> <ar­ti­cle>

<h2>pa­ge Tit­le</h2> </ar­ti­cle>

3. Ini­ti­eer het Css-be­stand

In sty­les.css be­gin je met de Css-op­maak­re­gels waar­mee de HTML- en bo­dy-con­tai­ners het ge­he­le scherm in­ne­men, met een zwar­te ach­ter­grond en wit­te tekst. Stel de mar­gin en pad­ding in op 0 om ran­den om de pa­gi­na te voor­ko­men. html,bo­dy{ dis­play: block; width: 100%; height: 100%;

mar­gin: 0; pad­ding: 0; font-fa­mi­ly: Hel­ve­ti­ca, sans-se­rif; back­ground: #000; co­lor: #fff; }

4. Laad­scherm-con­tai­ner

Om de HTML over­zich­te­lijk en net­jes te hou­den en de CSS lexi­bel, ver­wijs je op ab­strac­te wij­ze naar de con­tai­ner van het laad­scherm. Om­dat de re­gel naar het eer­ste ele­ment in de bo­dy ver­wijst, kun je de div in een an­der ele­ment­ty­pe ver­an­de­ren zon­der dat je de CSS breekt. Plaats de con­tai­ner links­bo­ven op het scherm en laat hem 100%van de breed­te van de vie­w­port in­ne­men. Stel de groot­te van het font zo in dat het 90% van de hoog­te van de vie­w­port in­neemt. Stel een ho­ge z-in­dex voor de con­tai­ner in om er ze­ker van te zijn dat hij al­tijd bo­ven al­le an­de­re con­tent zicht­baar is. bo­dy > *:nth-child(1) { po­si­ti­on: ab­so­lu­te; back­ground-co­lor: #fff; top: 0; left: 0; z-in­dex: 99999; text-align: cen­ter; font-weight: bold; co­lor: transpa­rent; width: 100vw; font-si­ze: 90vh; }

5. Con­tai­ner-clip­ping

Met de span in de con­tai­ner van het laad­scherm snij je de tekst uit stap 1 met het at­tri­buut ‘back­ground­clip’ als het wa­re uit de ach­ter­grond. Om­dat dit at­tri­buut spe­ci iek voor Web­kit-brow­sers is, voeg je een fall­back toe voor brow­ser die dat niet on­der­steu­nen. Die to­nen de tekst dan in het wit, zon­der de uit­sne­de. Stel de laad­a­ni­ma­tie zo in dat hij tien se­con­den duurt. Tot slot stel je een fa­de-out van twee se­con­den in die start wan­neer de bo­dy van het do­cu­ment de klas­se ‘lo­a­ded’ heeft ge­kre­gen. bo­dy > *:nth-child(1) > span {

back­ground: url(ima­ge.png) #000 left bottom no-re­peat;

-web­kit-text-fill-co­lor: transpa­rent;

-web­kit-back­ground-clip: text; co­lor: #fff; dis­play:block; ani­ma­ti­on: loa­ding 10s for­wards; } bo­dy.lo­a­ded > *:nth-child(1){

ani­ma­ti­on: fa­de 2s for­wards; }

6. De ini­eer de ani­ma­ties

In de­ze stap de ini­eer je de ani­ma­ties voor het laad­scherm. Je laat dit scherm uit­fa­den door het at­tri­buut opa­ci­ty van vol­le­dig zicht­baar naar on­zicht­baar te ver­an­de­ren en de con­tai­ner dan op het laat­ste mo­ment bui­ten de vie­w­port te zet­ten. De ani­ma­tie ‘loa­ding’ ver­an­dert de hoog­te van de ach­ter­grond­af­beel­ding van 20% tot de vol­le­di­ge hoog­te. @key­fra­mes fa­de { 0% { opa­ci­ty: 1; } 99% { opa­ci­ty: 0; left: 0;} 100% { left: -100vw; } } @key­fra­mes loa­ding { 0% { back­ground-si­ze: 100% 20%; } 100% { back­ground-si­ze: 100% 100%; } }

7. De­tec­teer het la­den van de pa­gi­na

In co­de.js zet je de co­de die wacht tot de brow­ser de­tec­teert dat de pa­gi­na vol­le­dig ge­la­den is. Daar­na wordt de klas­se ‘lo­a­ded’ aan de bo­dy toe­ge­voegd. Die klas­se trig­gert de fa­de-ani­ma­tie die bij stap 5 aan het laad­scherm ge­han­gen werd. win­dow.ad­de­vent­lis­te­ner(“load”, func­ti­on(){

do­cu­ment.bo­dy.clas­s­na­me += “lo­a­ded “; });

8. Laad-si­mu­la­tie

Het la­den van lo­ka­le con­tent gaat een stuk snel­ler dan bij de li­ve-ver­sie. Ver­vang de co­de bij stap 7 door de co­de van de­ze stap als je het ui­ter­lijk van het laad­scherm test. win­dow.ad­de­vent­lis­te­ner(“load”, func­ti­on(){ set­ti­me­out(func­ti­on(){

do­cu­ment.bo­dy.clas­s­na­me += “lo­a­ded “;},5000); });

Newspapers in Dutch

Newspapers from Netherlands

© PressReader. All rights reserved.