Kreativ Webkodning

19-04-2024

En webfeature/webdok er en hjemmeside/ artikle, der bruger mange elementer som fx. billede, video og lyd, til at indrage læseren, og give dem lyst til at læse artiklen 

et eksempel på dette er DRs artikel om en russisl spion i Danmark: https://www.dr.dk/nyheder/webfeature/russiskspion

i denne artikel gør det brug af bla. paralax scrolling, animeret scrollbar i toppen og billeder. dette kombineret med den sorte farve, giver læseren en følelse at hvad den her sag gik ud på, og hvor mørk og dyster den hvar 

Video

Video i DIV.

Jeg skulle sætte en video ind i DIV box, mens der var den normale video bagved, det var pretty much det samme, bare i en div box i stedet.

Parallax scrolling

25-04-2024

Parallax scrolling er en teknik inden for webdoks, hvor nogle dele af hjemmesiden er stationer når du scroller 

Det er en af mange muligheder for at style din historiefortælling på en måde der knytter sig til brugerens 'scrolling' af siden. 

Parallax scrolling er en stærk visuel effekt, der kan give din læser en oplevelse af dybde og lagdeling, der alt sammen kan bidrage til en større oplevelse/et større engagement.

Ulempen ved denne teknik kan dog være at overdreven brug næste kan gøre læseren søsyg, eller endnu værre helt fjerne fokus fra indholdet. Som altid med effekter handler det om at gøre det 'smagfuldt', og tænke over mængde og omfang. 

Animation

Vi skulle selv prøve at experimentere med at lave noget animation ud fra en kode vi var givet (og lidt hjælpe fra w3schools). Jeg har prøvet at arbejde med keyframes før i blender, dog fungere de meget anderledes end dem i css

fx skulle vi se hvordan scroll based animationer fungere, det er animationer der afspiller sig i takt med at du scroller på hjemmesiden

i det overstående billede kan du så en pengvin, denne pengvin bevågere sig rund på siden alt efter hvor lang du scroller ned

Og her er koden til det