Maak een bib­be­rend tekst­ef­fect voor na­vi­ga­tie­links

Gebruik Css-ani­ma­tie­func­ties om tekst te la­ten bib­be­ren wan­neer je er­bo­ven zweeft

Web Designer Magazine - - Lightbox -

1. Html-do­cu­ment

In de eer­ste stap van het pro­ject de­fi­ni­eer je een Html-do­cu­ment met een head- en een bo­dy-sec­tie. In de head-sec­tie zet je de me­ta­be­schrij­vin­gen van de pa­gi­na en links naar ex­ter­ne bron­nen, zo­als de sty­les­heet. In de bo­dy zet je de zicht­ba­re in­houd van de pa­gi­na. <!DOCTYPE html> <html> <head> <tit­le>shi­ver Ef­fect</tit­le> <link rel=”sty­les­heet” ty­pe=”text/css” href=”sty­les.css” /> </head> <bo­dy> *** STAP 2 </bo­dy> </html>

2. Bib­ber-in­houd

De bib­ber-in­houd is een na­vi­ga­tie­con­tai­ner met meer­de­re links. Die na­vi­ga­tie­con­tai­ner heeft de klas­se ‘shi­ver’ (En­gels voor bib­be­ren), die je bij de vol­gen­de stap­pen ge­bruikt om te ver­wij­zen naar de items waar­op je het bib­ber­ef­fect wilt toe­pas­sen. <nav class=”shi­ver”> <a href=”#”>alp­ha</a> <a href=”#”>bra­vo</a> <a href=”#”>char­lie</a> </nav>

3. Css-sty­les­heet

In de sty­les­heet sty­les.css stel je in hoe de in­houd van de web­pa­gi­na op­ge­maakt wordt. Als eer­ste geef je aan dat het Html-do­cu­ment en de bo­dy­con­tai­ners een zwar­te ach­ter­grond zon­der bor­der heb­ben. Daar­na geef je de links een ro­de kleur. 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: rgb(21, 34, 47); } a{

co­lor: #c00; }

4. Shi­ver: ini­ti­ë­ren

Pas het ani­ma­tie-ef­fect toe op al­le first-le­vel child­ren van de con­tai­ner met de klas­se shi­ver. Geef die ele­men­ten weer als blok­ele­men­ten met re­la­tie­ve po­si­ti­o­ne­ring. Dat is be­lang­rijk om­dat je de po­si­tie van de ani­ma­tie re­la­tief in­stelt ten op­zich­te van de oor­spron­ke­lij­ke lo­ca­tie van de ele­men­ten. .shi­ver > *{ dis­play: block; po­si­ti­on: re­la­ti­ve; }

5. Shi­ver: toe­pas­sen

Het bib­ber­ef­fect wordt ge­ac­ti­veerd wan­neer een ge­brui­ker met de muis bo­ven een van de chil­di­tems ho­vert. Het ef­fect start een ani­ma­tie die 0,15 se­con­de duurt, maar on­ein­dig her­haald wordt. Met hulp van de hover-se­lec­tor en het ani­ma­ti­o­nat­tri­buut spe­ci­fi­ceer je de ani­ma­tie die ge­start moet wor­den. .shi­ver > *:hover{

ani­ma­ti­on: shi­ver .15s in­fi­ni­te; }

6. Shi­ver: de­fi­ni­ë­ren

De­fi­ni­eer de bib­be­r­ani­ma­tie als een aan­tal key­fra­mes. Met het eer­ste en laat­ste fra­me zet je het ele­ment op zijn oor­spron­ke­lij­ke po­si­tie – 0 pixels van­af de lin­ker­rand. Daar­door kun je de ani­ma­tie her­ha­len zon­der dat het lijkt als­of hij tel­kens naar de oor­spron­ke­lij­ke po­si­tie te­rug­springt. De twee an­de­re fra­mes ver­plaat­sen het ele­ment 5 pixels naar links en rechts. Veran­der die ge­tal­len als je de tekst ver­der wilt la­ten be­we­gen. @key­fra­mes shi­ver { 0% {left: 0;} 25% {left: -5px;} 75% {left: 5px;} 100% {left: 0;} }

Newspapers in Dutch

Newspapers from Netherlands

© PressReader. All rights reserved.