Laat tekst met knip­pe­ren­de kleu­ren in beeld ver­schij­nen

Ge­bruik CSS en Ja­vascript om de let­ters of woor­den van een tekst een voor een te la­ten ver­schij­nen.

Web Designer Magazine - - Lightbox | Mtn Dew X Nba -

1. Html-do­cu­ment

Je start het pro­ject met een stan­daard Html-do­cu­ment met bo­dy- en head-sec­ties. In de head-sec­tie zet je een be­schrij­ving van het do­cu­ment en kop­pe­lin­gen naar ex­ter­ne Ja­vascript- en Css-bron­nen. In de bo­dy komt de zicht­ba­re in­houd die je in stap 2 maakt. <!DOCTYPE html> <html> <head> <me­ta char­set=”utf-8” /> <me­ta http-equiv=”x-ua-com­pa­ti­ble” con­tent=”ie=ed­ge”> <me­ta na­me=”de­scrip­ti­on” con­tent=”de­scrip­ti­on”> <tit­le>flic­ke­ring Text Tran­si­ti­on</tit­le> <link rel=”sty­les­heet” ty­pe=”text/css” me­dia=”screen” href=”sty­les.css”/> <script src=”code.js”></script> </head> <bo­dy> *** STAP 2 HIER </bo­dy> </html>

2. Bo­dy-in­houd

In dit voor­beeld ge­brui­ken we een h2-ele­ment dat de ge­a­ni­meer­de tekst be­vat. Je ge­bruikt de klas­se ‘words’ die je op dit ele­ment toe­past om het ge­a­ni­meer­de tekst­ef­fect te star­ten. Door­dat je de woor­den in dit ele­ment met het te­ken ‘|’ scheidt, kun je de tekst op­split­sen in let­ters, woor­den of groe­pen. <h2 class=”words”> A | B | C | D | E | F </h2>

3. De­fi­ni­eer Ja­vascript

Maak een nieuw be­stand dat je code.js noemt. Met het Ja­vascript up­da­te je de in­houd in de con­tai­ner ‘words’ door el­ke woord­groep in een span-no­de te zet­ten. Dat be­reik je door elk ele­ment te zoe­ken waar­aan een klas­se ‘words’ is toe­ge­kend en ver­vol­gens de tekst daar­in te split­sen met het te­ken ‘|’. Hier­door kan het HTML in de woord­con­tai­ners ge­mak­ke­lijk door het CSS ge­wij­zigd wor­den. win­dow.ad­de­vent­lis­te­ner(“load”, func­ti­on() { var no­des = do­cu­ment.query­se­lec­to­rall(“. words”); for(var i=0; i<no­des.length; i++){ var words = no­des[i].in­ner­text. split(“|”); var html = “”; for(var i2=0; i2<words.length; i2++){ html += “<span>”+words[i2]+”</span>” } no­des[i].in­ner­ht­ml = html; } });

4. Woord-elementen

Om de elementen te ani­me­ren die het Ja­vascript ge­maakt heeft en daar­na in de woord­con­tai­ner(s) heeft ge­plaatst, moet je er in­stel­lin­gen op toe­pas­sen. In de­ze stap maak je elk ele­ment stan­daard on­zicht­baar en pas je er een ani­ma­tie op toe die on­ein­dig her­haald wordt. Elk door­gang van de ani­ma­tie duurt tien se­con­den. .words span{ po­si­ti­on: re­la­ti­ve; opa­ci­ty: 0; ani­ma­ti­on: ani­ma­te­words 10s ea­se-in-out in­fi­ni­te; }

5. Kin­der­spel

Al­le child-woor­den moe­ten op ver­schil­len­de tij­den met hun ani­ma­tie be­gin­nen. Met de se­lec­tor nthchild ver­wijs je naar de­ze elementen. Zie je hoe er met een ‘n’ naar de­ze elementen wordt ver­we­zen? In dit ge­val ver­wij­zen we naar élk vier­de child, dus niet naar al­léén het vier­de child. Hier­door kun je de­zelf­de ani­ma­tie-in­stel­lin­gen op een on­ein­di­ge hoe­veel­heid woor­den toe­pas­sen. .words span:nth-child(4n) { ani­ma­ti­on-de­lay: 0s; co­lor: #678a6b; } .words span:nth-child(4n-1) { ani­ma­ti­on-de­lay: 1s; co­lor: #bcd292; }

6. Ex­tra ani­ma­ties

In de­ze stap pas je de ani­ma­ties op de an­de­re child­ren toe. Zie je dat de se­lec­tor nth-child nu ge­bruikt wordt om naar child­ren vóór de po­si­tie 4n te ver­wij­zen? Net als in de vo­ri­ge stap pas je unie­ke ani­ma­tie­de­lays en kleu­ren op de­ze child­ren toe waar­door de be­oog­de ani­ma­tie ver­schijnt. .words span:nth-child(4n-3) { ani­ma­ti­on-de­lay: 2s; co­lor: #e7d7fc; } .words span:nth-child(4n-2) { ani­ma­ti­on-de­lay: 3s; co­lor: #dec1f5; }

7. Ani­ma­tie de­fi­ni­ë­ren

In dit voor­beeld ge­brui­ken we een sim­pe­le ani­ma­tie die de dek­king van zicht­baar naar on­zicht­baar en vi­ce ver­sa ver­an­dert. Wan­neer je dat com­bi­neert met de eer­der in­ge­stel­de unie­ke ver­tra­ging van el­ke nth-child-groep, ver­schij­nen er ver­schil­len­de woord­groe­pen te­ge­lij­ker­tijd tot­dat het be­richt com­pleet is. Je kunt de ani­ma­tie met ex­tra re­gels aan je ei­gen ei­sen aan­pas­sen. @-web­kit-key­fra­mes ani­ma­te­words { from { opa­ci­ty: 1; } to { opa­ci­ty: 0; } }

<Bo­ven> De mo­bie­le si­te lijkt heel veel op de desktop­ver­sie en ge­bruikt het ver­plich­te ham­bur­ger­me­nu voor de na­vi­ga­tie.

Newspapers in Dutch

Newspapers from Netherlands

© PressReader. All rights reserved.