Laat re­gen­drup­pels op je con­tent spet­te­re­ren

Ge­bruik Ja­vascript en CSS voor de il­lu­sie van re­gen­drup­pels die op je web­pa­gi­na spet­te­ren

Web Designer Magazine - - Lightbox Save Tropical House -

1. Html-struc­tuur

In de eerst stap ini­ti­eer je de HTML waar­in je het pa­gi­na­do­cu­ment en de zicht­ba­re in­houd de­fi­ni­eert. In de head-sec­tie zet je links naar ex­ter­ne CSS- en Ja­vascript-re­sour­ces en in de bo­dy-sec­tie zet je de in­houd die op de pa­gi­na zicht­baar moet zijn. Dit voor­beeld heeft een div-ele­ment waar­op je de klas­se ‘rain’ toe­past. Die ge­bruik je in stap 2. <!DOCTYPE html> <html> <head> <tit­le>rain</tit­le> <link rel=”sty­les­heet” ty­pe=”text/css” me­dia=”screen” href=”sty­les.css”/>

<script src=”co­de.js” ty­pe=”text/ ja­vascript”></script> </head> <bo­dy> <div class=”rain”> </div> </bo­dy> </html>

2. Vul klas­se ‘rain’ met JS

Maak een nieuw co­de.js-be­stand voor het op­slaan van de Ja­vascript-co­de. Om on­no­di­ge HTML te ver­mij­den, ge­bruik je Ja­vascript om de klas­se ‘rain’ te vul­len die je in stap 1 ge­maakt hebt. Met de co­de maak je 30 span-ele­men­ten die elk een unie­ke in­li­ne-sty­ling voor de ho­ri­zon­ta­le en ver­ti­ca­le po­si­tie heb­ben. Door de va­ri­a­be­le ‘count’ te wij­zi­gen, ver­an­der je het aan­tal span-ele­men­ten dat ge­maakt wordt. Mo­men­teel is dat in­ge­steld op 30. win­dow.ad­de­vent­lis­te­ner(“load”, func­ti­on() { var count = 30; for(var i=0; i<count; i++){

var no­de = do­cu­ment. cre­a­tee­le­ment(“span”);

no­de.sty­le.left = Math.floor(math. random() * 100)+”vw”;

no­de.sty­le.top = Math.floor(math. random() * 100)+”vh”;

do­cu­ment.query­se­lec­tor(“.rain”). ap­pend­child(no­de);

} });

3. Start CSS

Maak het be­stand sty­les.css waar­in je de Cs­sop­maak­re­gels de­fi­ni­eert. Met de eer­ste re­gels de­fi­ni­eer je de HTML- en bo­dy-con­tai­ners van het do­cu­ment, die de vol­le­di­ge groot­te van het scherm in­ne­men. Ver­der stel je een ach­ter­grond­af­beel­ding voor de bo­dy in. Daar­na stel je het for­maat van de ach­ter­grond in op ‘co­ver’, zo­dat de af­beel­ding al­tijd de vol­le­di­ge bo­dy be­dekt. html,bo­dy{ dis­play: block; width: 100vw; height: 100vh; } bo­dy{ back­ground: url(back­ground.jpg); back­ground-si­ze: co­ver; }

4. Maak span-ele­men­ten in ‘rain’ op

De span-ele­men­ten die je bij stap 2 ge­maakt hebt, moe­ten er­uit­zien en zich ge­dra­gen als re­gen­drup­pels. Daar­om geef je ze eerst een re­la­tie­ve po­si­tie ten op­zich­te van hun stan­daard­lo­ca­tie. Daar­na voer je de zicht­ba­re re­gen­drup­pels met CSS uit als vir­tu­e­le ‘be­fo­re’-ele­men­ten waar­op je op­maak- en ani­ma­tie­re­gels toe­past. Met die aan­pak kun je de zicht­ba­re ani­ma­ties re­la­tief weer­ge­ven ten op­zich­te van de po­si­ties van de pa­rent-span. De re­gen­drup­pels wor­den als wa­zi­ge ova­len weer­ge­ge­ven. .rain span{

po­si­ti­on: re­la­ti­ve; } .rain span::be­fo­re{ con­tent: “”; po­si­ti­on: ab­so­lu­te; dis­play: block; width: 1mm; height: 3mm; top: 0; left: 0; fil­ter: blur(5px); back­ground: rg­ba(0,0,0,.5); bor­der-ra­di­us: 100%; opa­ci­ty: 0; -web­kit-ani­ma­ti­on: rai­na­nim 5s ea­se-in­out in­fi­ni­te; }

5. Ani­ma­tie­groe­pen

Hoe­wel al­le vir­tu­e­le span-ele­men­ten de­zelf­de ani­ma­tie de­len, moet het wel lij­ken als­of ze wil­le­keu­rig be­we­gen. Om het sim­pel te hou­den, ge­bruik je de se­lec­tor nth-child om een ver­tra­ging voor de start­tijd van de ani­ma­ties in te stel­len. Door elk child-span als het wa­re te kop­pe­len aan el­ke vijf­de child, de­len de span-ele­men­ten de­zelf­de start­tijd in groe­pen van vijf. Dat geeft een in­druk van wil­le­keu­rig be­we­gen­de re­gen­drup­pels en werkt met el­ke hoe­veel­heid spans. .rain span:nth-child(5n)::be­fo­re {

-web­kit-ani­ma­ti­on-de­lay: 0s; } .rain span:nth-child(5n-1)::be­fo­re {

-web­kit-ani­ma­ti­on-de­lay: 3s; } .rain span:nth-child(5n-2)::be­fo­re {

-web­kit-ani­ma­ti­on-de­lay: 6s; } .rain span:nth-child(5n-3)::be­fo­re {

-web­kit-ani­ma­ti­on-de­lay: 9s; } .rain span:nth-child(5n-4)::be­fo­re {

-web­kit-ani­ma­ti­on-de­lay: 12s; }

6. De­fi­ni­eer de ani­ma­tie

Het ani­ma­tie-ef­fect van de re­gen­drup­pels be­rust op niets meer dan het ver­an­de­ren van de trans­pa­ran­tie van vol­le­dig on­door­zich­tig naar trans­pa­rant, ter­wijl je de items 5em ten op­zich­te van hun start­po­si­tie naar be­ne­den be­weegt. Om­dat je de ani­ma­tie toe­past op het vir­tu­e­le ‘be­fo­re’-ele­ment van het span, lijkt het als­of de ani­ma­tie re­la­tief be­weegt ten op­zich­te van de po­si­tie van de pa­rentspan die Ja­vascript heeft in­ge­steld. @-web­kit-key­fra­mes rai­na­nim { from { opa­ci­ty: 1;} to { opa­ci­ty: 0; top: 5em; } }

Newspapers in Dutch

Newspapers from Netherlands

© PressReader. All rights reserved.