Teknisk dokumentation

Transkript

1 Teknisk dokumentation Scene 11 Html kode javascript kode Til at sætte et stykke lyd ind på en hjemmeside, skal man bruge det semantiske tag <audio></audio>. Inde i tag et skal man bruge et empty tag, <source>, som indeholder en attribut, bestående af src (navnet på atributten) og (atributtens værdi). Det stykke kode fortæller, hvad det er, og hvor serveren skal finde det. Man skal dog også sætte typen, sådan så serveren ikke er i tvivl. For at kunne bestemme over denne lyd/musik, skal der skrives noget javascript kode. Vi har lavet en variabel var, som vi har givet et navn minlyd6, for at kunne kalde på den når vi har lyst. Vi sætter variablen = med det id, vi har givet audio tag et, altså #onde_samurai. $( #... ) er en selector for et id, når man skriver javascript, ligesom # er det i CSS. Vi laver en metode (settimeout). For at metoden skal virke, at det vigtigt at sætte to parametre, function og delay. Function fortæller at variablen minlyd6, skal starte. For at metoden skal virke, skal vi også fortælle metoden, hvor lang tid der skal gå, fra den forrige kode er blevet læst, til at denne kode skal læses. Dette bliver altid skrevet i millisekunder. Så når vi skriver 8000, er det det samme som 8 sekunder. Det er en fordel, hvis man har lyde, som skal starte og stoppe på forskellige tidspunkter, eller har brug for en pause imellem de interaktive elementer.

2 Scene 8 Layoutdiagram Layoutdiagrammet viser kun de kommende beskrevne elementer. HTML5 Scene 8 er tager udgangspunkt i figuren Sensei og figuren Lille ninja. Sensei er indsat ved det ikke-semantiske tag <div></div>, under class navnet sensei. Div tagget, fungerer som en container, indkapsler alt indholdet i selve tagget. Inde i dette tag, er indsat en tom div container, hvor figuren i form af en CSS animation bliver placeret. Samme princip gør sig gældende med lille ninja figuren. Der er indsat en baggrundslyd, ved hjælp af det semantiske tag <audio>. Denne procedure er allerede beskrevet.

3 jquery Vi starter med, at definere hvor baggrunds musikken skal starte. Dette gøres med event handleren bind, som kalder på den indbyggede funktion play i jquery biblioteket. Denne funktion starter baggrundsmusikken, som er defineret ved class.bag. I og med at forrige side bruger samme lyd, har vi ved hjælp af currenttime, sat lyden til at starte 18 sekunder inde i sangen. Baggrundslydens volumen er dæmpet fra 1.0 til 0.15, for at kunne høre fortæller stemmen. Dette er gjort med prop, som ændrer værdien, som i dette tilfælde er volumenen. Når siden er loadet, begynder funktionen ninja, som får figuren ninja til at gå ind på siden. Div figuren ninja er som udgangspunkt i CSS placeret således; left: -10vw; og bottom 0vh;. Ved hjælp af animate, ændres disse værdier, så ninja figuren i løbet af 3000 millisekunder, har placeret sig; left: 20vw og bottom: 4vh;. CSS

4 Inde i div figuren ninja, findes div figuren walk. walk er en CSS animation, som får lille ninja til at vralte. Når div boksen ninja er på plads, kaldes funktionen stopwalking, som derefter pauser CSS animationen. Dette i kombination, får det til at se ud som, at figuren lille ninja faktisk selv går ind til sensei. Scene 14 Animation: Her vil jeg vise animationer på scene 14. Hvor class= apple kommer flyvende ind og forsvinder, hvor det så er class= sensei der vises. Layout diagram HTML

5 Javascript/ jquery I CSS har vi valg at der kun skulle vises.baggrund og.klik,.apple har vi placeret udenfor rammen henne i venstre side. Det resterende har vi sat til display:none; i css. Derefter har vi oprettet en klik-funktion i jquery. Klik-funktion aktiveres ved, at man klikker på.baggrund. Når funktionen aktiveres får den.apple til at bevæge sig ind i rammen fra venstre mod højre. Når animationen slutter aktiveres den en ny funktion visav. Funktion visav gemmer.baggrund,.apple og.klik, samtidig med at.sensei vises. Vi har sat forsinkelser på en funktion.next, ved at benytte settimeout. Dette gøre at funktion.next aktiveres efter 5 sekunder. Funktion next aktiverer class.next.