Animation

Animationer er ofte brugt i webdocs. De kan eksempelvis bruges til at visualisere en handling i et diagram eller lign, og som sådan være relativt simple. Her er der for eksempel mulighed for at ændre farve, position og orientering af en <div> boks. 

Det er selvfølgelig også en mulighed at ændre divboksens baggrund til et billede istedet for en baggrundsfarve, og herved flytte et billede eller en figur rundt.

Prøv selv. Kopier koden fra https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation_count2 ind i brackets og eksperimenter med de grundlæggende muligheder for at animere et objekt.

Du kan se flere animations eksempler her: https://www.w3schools.com/css/css3_animations.asp

Det er også muligt at animere flere forskellige CSS properties - altså nogle af de egenskaber man kan style objekter med. Eksempler kunne være font eller height properties. Se hele listen over CSS properties der kan animeres her: https://www.w3schools.com/cssref/css_animatable.php

Simpel animation

Download og udpak projektfilerne til sin egen mappe, og leg med koden. Lav foreksempel din egen sti animationen skal følge eller leg med tiden/acceleration/deceleration. Du kan også prøve at lege med CSS Transform property, for at ændre på figurens form undervejs i animationen.

Du kan finde mere hjælp her:

https://www.w3schools.com/cssref/css3_pr_animation.php

https://www.w3schools.com/cssref/css3_pr_transform.php

Scroll driven progress bar

I den her øvelse kan du se hvordan du nemt kan lave en 'progress bar' i toppen af dit site. Denne er ofte ret fed at have med i en 'Scrollyteller'.

Scroll driven Penguin

Her kan du lege med en lille pingvin du kan animere rundt - men drevet af hvor mange procent af siden der er blevet scrollet, istedet for en fast tid.

Hvis du sammenligner denne med DR's webdoc og Putins Krig, kan du måske lave noget der ligner bomben der falder.

Scroll driven Penguin - relative

Med denne sidste øvelse vil jeg forsøge at vise hvordan du kan gøre den foregående animation relativ til en div box. Dette kan jo være nødvedigt hvis vi skal bruge fuldstændig kontrol over hvor vores animation er i forhold til en baggrund.