Maak een ban­ner die van rechts het beeld in­schuift

Ge­bruik CSS om in­houds­ban­ners in te voe­ren voor el­ke sec­tie van een pa­gi­na waar­naar be­zoe­kers kun­nen na­vi­ge­ren.

Web Designer Magazine - - Lightbox | One A Storm System -

1. De Html-struc­tuur

Je be­gint met het Html-do­cu­ment met een he­a­den een bo­dy-sec­tie. In de bo­dy komt de con­tent voor stap 2 te staan, ter­wijl de head-sec­tie ge­bruikt wordt voor be­schrij­vin­gen van het do­cu­ment en ver­wij­zin­gen naar ex­ter­ne bron­nen. In de­ze work­shop is dat een Css-be­stand. <!DOCTYPE html> <html> <head> <tit­le>switch</tit­le> <link rel=”sty­les­heet” ty­pe=”text/css” href=”sty­les.css” /> </head> <bo­dy> *** STAP 2 HIER </bo­dy> </html>

2. Zicht­ba­re in­houd

Nu de Html-struc­tuur staat, maak je de zicht­ba­re in­houd. Die be­staat uit de na­vi­ga­tie­knop­pen en de ar­ti­ke­len. Het eer­ste child van elk ar­ti­kel is een ban­ner met een af­beel­ding. Daar­na volgt een sec­tie met de lees­ba­re hoofd­con­tent. De na­vi­ga­tie­links ge­brui­ken hun href-at­tri­buut om via hun Id­naam naar de ar­ti­ke­len te ver­wij­zen. <a href=”#first” class=”gobtn”>go &gt;</a> <ar­ti­cle id=”first”> <span><img src=”ima­ge1.jpg” alt=”ima­ge”/> </span> <sec­ti­on> <h1>pa­ge 1</h1> <a href=”#se­cond” class=”gobtn”>go &gt;</a> </sec­ti­on> </ar­ti­cle> <ar­ti­cle id=”se­cond”> <span><img src=”ima­ge2.jpg” alt=”ima­ge”/> </span> <sec­ti­on> <h1>pa­ge 2</h1> <a href=”#first” class=”gobtn”>go &gt;</a> </sec­ti­on> </ar­ti­cle>

3. CSS de­fi­ni­ë­ren

In de vol­gen­de stap de­fi­ni­eer je de CSS voor de vi­su­e­le weer­ga­ve van het Html-do­cu­ment. Sla de CSS op in een nieuw be­stand dat je sty­les.css noemt. Met de eer­ste paar re­gels stel je in dat de Html-do­cu­ment­con­tai­ner en zijn bo­dy de ge­he­le vie­w­port vul­len, dat ze een zwar­te achtergrond heb­ben en dat er geen zicht­ba­re ran­den zijn. 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. Ar­ti­kel­con­tai­ners

Elk in­houds­seg­ment waar­naar je kunt na­vi­ge­ren, zit in een ar­ti­kel­con­tai­ner. Die stel je stan­daard in op on­zicht­baar, je geeft hem pas weer na­dat hij ge­se­lec­teerd is. Dat be­reik je door de z-in­dex­po­si­tie on­der die van de bo­dy van het do­cu­ment in te stel­len – op -1. Wan­neer het ar­ti­kel via de URI wordt ge­tar­get door te re­fe­re­ren aan de Id-naam die je aan het ar­ti­kel hebt ge­ge­ven, zet je de z-in­dex­po­si­tie op 1. ar­ti­cle{ po­si­ti­on: ab­so­lu­te; top: 0; left: 0; z-in­dex: -1; width: 100vw; height: 100vh; back­ground: #000; } ar­ti­cle:tar­get{

z-in­dex: 1; }

5. Ban­ne­r­af­beel­ding in­stel­len

Om­dat de ban­ner met de af­beel­ding het eer­ste child van elk ar­ti­kel is, ver­wijs je er met de se­lec­tor nth-child naar. Je stelt dit ele­ment met spe­ci­fie­ke af­me­tin­gen in. De­len van de af­beel­ding die daar­bui­ten val­len, maak je on­zicht­baar. Om de ani­ma­tie te la­ten wer­ken, pas je een tran­si­tie toe en zet je het ele­ment stan­daard bui­ten de vie­w­port. ar­ti­cle > *:nth-child(1){ dis­play: block; po­si­ti­on: ab­so­lu­te; over­flow: hi­d­den; tran­si­ti­on: all 1s; width: 100vw; height: 20vh; right: -100vw; }

6. Ban­ner ac­ti­ve­ren

De ban­ner schuift het beeld bin­nen wan­neer de Id­naam van een ar­ti­kel via de URI wordt ge­tar­get. Door nu een nieu­we po­si­tie voor de ban­ner-con­tai­ner in te stel­len, schuift de af­beel­ding van­af rechts de vie­w­port in met de tran­si­tie en van­af de po­si­tie die je in stap 5 hebt in­ge­steld. Stel de child-af­beel­ding van de ban­ner even­eens zo in dat die de vol­le­di­ge breed­te van de ban­ner vult. ar­ti­cle:tar­get > *:nth-child(1){

right: 0; } ar­ti­cle > *:nth-child(1) img{

width: 100%; }

7. Af­wer­king

Alles voor het ban­ne­r­ef­fect is nu com­pleet. In de laat­ste stap stel je de po­si­tie van de ar­ti­kel­sec­ties in en geef je aan hoe de na­vi­ga­tie­links weer­ge­ge­ven wor­den. De sec­ties met con­tent moe­ten on­der de ge­a­ni­meer­de ban­ner ver­schij­nen. Om­dat je vas­te af­me­tin­gen voor de ban­ner hebt in­ge­steld, weet je dat dit 20vw van­af de bo­ven­kant van de pa­gi­na is. Geef de na­vi­ga­tie­knop­pen wat pad­ding en een rand om ze er als knop­pen te la­ten uit­zien. ar­ti­cle > sec­ti­on{ po­si­ti­on: ab­so­lu­te; width: 100vw; top: 20vh; } .gobtn{ co­lor: #fff; text-de­co­ra­ti­on: no­ne; bor­der: 1px so­lid #fff; pad­ding: 1em; }

Newspapers in Dutch

Newspapers from Netherlands

© PressReader. All rights reserved.