Tech­niek

Web Designer Magazine - - Webworkshop -

1. In­tro-ani­ma­tie

Met de­ze stap­pen cre­ëer je een ge­a­ni­meer­de in­tro zo­als op la­vins­ky.com. De­ze co­de moet je toe­voe­gen aan de bo­dy om de in­houd te ver­pak­ken in een div die over low-ele­men­ten ver­bergt. Hier­in be­vin­den zich de ti­tel en de voor- en ach­ter­gron­da beel­ding. <div id=”con­tai­ner”> <div id=”back” class=”sli­de”></div> <div id=”hea­ding”> <h1>wel­kom</h1></div> <div id=”front” class=”sli­de”></div> </div>

2. Stij­len voor de con­tent

Maak een apart sty­les­heet of los­se tags voor de ba­sis pa­gi­na­stijl. Ver­wij­der daar­in de stan­daard brow­ser­mar­ge en pad­ding. De con­tai­ner moet de he­le pa­gi­na vul­len en over low-con­tent ver­ber­gen. De a beel­din­gen schui­ven na­me­lijk te­voor­schijn van­uit een over low-po­si­tie. html,bo­dy { mar­gin: 0; pad­ding: 0; width: 100%; height: 100%; font-fa­mi­ly: ‘Os­wald’, sans-se­rif; } #con­tai­ner { po­si­ti­on: re­la­ti­ve; width: 100%; height: 100%; over­flow: hi­d­den; }

3. Voor en ach­ter

Nu de ini­eer je de af­zon­der­lij­ke stij­len voor de voor­grond en ach­ter­grond, waar­door die bei­de een an­de­re a beel­ding bo­ven­op de div to­nen. Kop­pel de key­fra­mes van de ani­ma­tie aan de ani­ma­tie-naam en stel de trans­for­ma­tie in die tij­dens het la­den wordt uit­ge­voerd. #back { back­ground: url(img/back.jpg) no-re­peat cen­ter cen­ter; back­ground-si­ze: co­ver; ani­ma­ti­on-na­me: sli­de­top; trans­form: trans­la­te(-200%, 100%) ro­ta­te(0deg); } #front { back­ground: url(img/front.jpg) no-re­peat cen­ter cen­ter; back­ground-si­ze: co­ver; ani­ma­ti­on-na­me: sli­de­be­low; trans­form: trans­la­te(100%, 120%) ro­ta­te(0deg); }

6.

Newspapers in Dutch

Newspapers from Netherlands

© PressReader. All rights reserved.