Cre­ëer een in­ter­ac­tie­ve ani­ma­tie die de ge­he­le ach­ter­grond weg­veegt

Ver­an­der de ach­ter­grond van de in­houd met Css-ani­ma­tie als re­ac­tie op de ge­brui­ker­sna­vi­ga­tie

Web Designer Magazine - - Lightbox Moments Of Happiness -

1. Het Html-do­cu­ment

Start het pro­ject met een Html-do­cu­ment. Dat be­staat uit de Html-con­tai­ner met daar­in een he­a­den een bo­dy-sec­tie. In de head-sec­tie ko­men de be­schrij­vin­gen te staan die niet op de web­pa­gi­na zicht­baar zijn en links naar ex­ter­ne bron­nen, zo­als het Css-be­stand. In de bo­dy zet je de in­houd die op de pa­gi­na zicht­baar moet zijn – wat je bij stap 2 en 3 doet.

2. Na­vi­ga­tie-in­houd

Het eer­ste ele­ment op de pa­gi­na is de in­houd­sna­vi­ga­tie. Die be­staat uit een nav-con­tai­ner met een aan­tal links. El­ke link ver­wijst met een Id-at­tri­buut naar zijn bij­be­ho­ren­de pa­gi­na-ar­ti­cle-con­tai­ner. Dat je een nav-con­tai­ner voor de na­vi­ga­tie-links ge­bruikt, heeft voor­de­len voor zo­wel SEO als Csssty­ling, zon­der dat de HMTL er in­ge­wik­kel­der door wordt. <nav> <a href=”#p1”>sec­ti­on 1</a> <a href=”#p2”>sec­ti­on 2</a> <a href=”#p3”>sec­ti­on 3</a> </nav>

3. De con­tai­ner ‘main’

Je ge­bruikt ‘main’ als con­tai­ner voor de be­lang­rijk­ste in­houds­sec­ties. El­ke in­houds­sec­tie be­staat uit een ar­ti­cle-con­tai­ner met een Id-at­tri­buut dat het­zelf­de is als zijn bij­be­ho­ren­de link in de na­vi­ga­tie. Ver­der heeft el­ke ar­ti­cle-sec­tie een leeg span-ele­ment als laat­ste item – dat ge­bruik je straks met CSS om het ach­ter­grond­ef­fect te ani­me­ren. <main> <ar­ti­cle id=”p1”> <h1>sec­ti­on 1</h1> <span></span> </ar­ti­cle> <ar­ti­cle id=”p2”> <h1>sec­ti­on 2</h1> <span></span> </ar­ti­cle> <ar­ti­cle id=”p3”> <h1>sec­ti­on 3</h1> <span></span> </ar­ti­cle> </main>

4. Ja­vascript-her­in­ne­ring

Maak een nieuw be­stand met de naam’ co­de.js’. Als je naar een nieuw ar­ti­cle na­vi­geert, moet je we­ten wel­ke ar­ti­cle-sec­tie er daar­voor ge­se­lec­teerd was. Daar­voor luis­ter je met Ja­vascript naar een pop­sta­te-ge­beur­te­nis – een ver­an­de­ring in de URI wan­neer er op een van de na­vi­ga­tie­links wordt ge­klikt. Die slaat de voor­gaan­de ‘tar­get’-re­fe­ren­tie op on­der een ‘da­ta-pre­vious’-at­tri­buut dat op de con­tai­ner ‘main’ wordt toe­ge­past. var tar­get = win­dow.lo­ca­ti­on.hash; win­dow.ad­de­vent­lis­te­ner(“pop­sta­te”, func­ti­on(){ if(tar­get != “”){

do­cu­ment.query­se­lec­tor(“main”). se­t­at­tri­bu­te(“da­ta-pre­vious”, tar­get); } tar­get = win­dow.lo­ca­ti­on.hash; });

5. Start CSS

Maak een nieuw be­stand met de naam sty­les.css. In de­ze stap stel je de HTML-, bo­dy- en main-con­tai­ners zo in dat ze de vol­le­di­ge breed­te en hoog­te van het scherm in­ne­men. Ver­der maak je re­gels om geen zicht­ba­re rand en een re­la­tie­ve po­si­ti­o­ne­ring in te stel­len. Die heb je no­dig voor het ef­fect.

6. Ar­ti­cle-con­tai­ners

El­ke van de ar­ti­cle-con­tai­ners met in­houd moet dus de ge­he­le groot­te van zijn pa­rent-con­tai­ner be­slaan, zo­als je bij de vo­ri­ge stap ge­de­fi­ni­eerd hebt. Met de se­lec­tor-tar­get geef je aan welk ar­ti­cle via de URI ge­se­lec­teerd is. Om­dat dat ar­ti­cle voor an­de­re ar­ti­cles zicht­baar moet zijn, stel je zijn z-in­dex in op 999. main ar­ti­cle{ po­si­ti­on: ab­so­lu­te; dis­play: block; height: 100%; width: 100%; pad­ding-top: 1em; over­flow: au­to; } main ar­ti­cle:tar­get{

z-in­dex: 999; }

7. Ach­ter­grond­ele­ment

De ver­an­de­ren­de ach­ter­grond be­staat uit ele­men­ten die je zo op­maakt dat ze met een be­paal­de kleur in beeld be­we­gen als daar­om ge­vraagd wordt. Om­dat hun z-in­dex la­ger moet zijn dan die van ar­ti­cles met een zicht­ba­re in­houd, geef je ze de waar­de -1. Om­dat je die ele­men­ten aan­duidt met een jo­ker­te­ken (*) en de se­lec­tor ‘last-child’, kun je elk ele­ment­ty­pe als ach­ter­grond­ele­ment ge­brui­ken – zo­lang die maar als laat­ste ele­ment in de ar­ti­cle-con­tai­ner staan. main ar­ti­cle > *:last-child{ po­si­ti­on: ab­so­lu­te; dis­play: block; width: 100%; height: 100%; top: 0; right: 100vw; z-in­dex: -1; back­ground: #000; tran­si­ti­on: right 1s; } main ar­ti­cle:tar­get > *:last-child{

ani­ma­ti­on: open 1s for­wards; }

8. Ach­ter­grond­op­maak

In de­ze ach­ter­grond de­fi­ni­eer je de sty­les voor de ach­ter­grond­com­po­nen­ten. Let op hoe hier ver­we­zen wordt naar het at­tri­buut da­ta-pre­vious dat via Ja­vascript op de con­tai­ner ‘main’ wordt toe­ge­past. Daar­door kun je de voor­gaan­de ach­ter­grond­kleur toe­pas­sen op de con­tent­con­tai­ner main om de il­lu­sie te wek­ken dat de ou­de ach­ter­grond op­zij schuift en plaats maakt voor de nieu­we ach­ter­grond. [da­ta-pre­vious=”#p1”], #p1 > span{

back­ground: gr­een; } [da­ta-pre­vious=”#p2”], #p2 > span{

back­ground: blue; } [da­ta-pre­vious=“#p3”], #p3 > span{

back­ground: red; }

9. Na­vi­ga­tie­me­nu en be­gi­n­a­ni­ma­tie

Bij de laat­ste stap stel je in hoe het na­vi­ga­tie­me­nu en de be­gi­n­a­ni­ma­tie van de ach­ter­grond in beeld ver­schij­nen. Om­dat het na­vi­ga­tie­me­nu al­tijd zicht­baar moet zijn, geef je het een vas­te po­si­tie links­bo­ven in het scherm. De be­gi­n­a­ni­ma­tie schuift het ele­ment van­af het eer­ste ‘from’-fra­me bui­ten beeld tot vol­le­dig in beeld bij het laat­ste ‘to’-fra­me. Al­le fra­mes daar­tus­sen wor­den au­to­ma­tisch be­re­kend. nav{ po­si­ti­on: fixed; top: 0; width: 100%; z-in­dex: 9999; back­ground: #000; } @key­fra­mes open{ from{ right: -100vw; } to{ right: 0; } }

Newspapers in Dutch

Newspapers from Netherlands

© PressReader. All rights reserved.