Om oppgaven

I denne oppgaven skal du lære å animerer HTML-objekter ved hjelp av CSS.

Oppgaven passer til:

Fag: Kunst og håndverk, Matematikk, Programmering, IT1

Anbefalte trinn: 7.trinn - VG3

Tema: Animasjon, CSS, HTML, Web

Tidsbruk: Dobbelttime eller mer.

Kompetansemål

Matematikk, 6. trinn: bruke variabler, løkker, vilkår og funksjoner i programmering til å utforske geometriske figurer og mønster
Kunst og håndverk, 7. trinn: bruke programmering til å skape interaktivitet og visuelle uttrykk
Kunst og håndverk, 10. trinn: utforske hvordan digitale verktøy og ny teknologi kan gi muligheter for kommunikasjonsformer og opplevelser i skapende prosesser og produkter
Programmering, 10. trinn: bruke flere programmeringsspråk, deriblant minst ett som er tekstbasert
IT1, VG2: designe og utvikle nettsider ved hjelp av markeringsspråk og programmering
IT1, VG2: lagre og hente fram data og presentere dem på nettsider
IT1, VG2: planlegge og implementere brukergrensesnitt

Forslag til læringsmål

Eleven kan legge HTML-elementer oppå hverandre for å skape en romfølelse.
Eleven kan programmere bokser med forskjellige farger
Eleven kan gjøre enkle animasjoner som å flytte en boks horisontalt, vertikalt og diagonalt
Eleven kan lage en animasjon som går uendelig lenge eller for et gitt tidsintervall.
Eleven kan kombinere HTML og CSS for å lage fint grensesnitt
Eleven kan flytte på et HTML-objekt ved hjelp av CSS
Eleven kan programmere et kvadrat i HTML og CSS

Forslag til vurderingskriterier

Eleven oppnår middels måloppnåelse ved å fullføre oppgaven.
Høy måloppnåelse: Eleven klarer å videreutvikle egen kode basert på oppgaven.

Forutsetninger og utstyr

Forutsetninger: Kjennskap til HTML og CSS.
Utstyr: Datamaskin med tilgang på internett og tekstbehandlingsprogram.

Fremgangsmåte

Her kommer tips, erfaring og utfordringer til de ulike stegene i den faktiske oppgaven.Klikk her for å se oppgaveteksten.

Steg 1: Animasjons-attributtet

Her kan det være lurt å terpe på hvordan programmeringskoden bør se ut. Koden ser mye bedre ut med inntrykk, mellomrom og linjeskift.

Steg 2: @keyframes

Dersom det er skrivefeil eller at man ikke bruker samme animation-name som ligger i @keyframes vil koden ikke kjøre.

Steg 4: Flyvende øks

Denne delen er kun forklart ved ord hva som skal gjøres. Trykk på Forslag til kode så langt i oppgaven for å se hvordan koden kan se ut. Samme gjelder for steg 5.

Variasjoner

Eleven kan bruke andre bilder og tekst for å lage en animasjon til noe annet. Dette kan være for noe de liker som feks fotball eller andre spill.
Elevene kan legge til flere elementer slik at animasjonen blir lengre. Får de til at det kommer en Minecraft-figur inn å henter øksen?

Forbedre denne siden

Funnet en feil? Kunne noe vært bedre?
Hvis ja, vennligst gi oss tilbakemelding ved å lage en sak på Github eller fiks feilen selv om du kan. Vi er takknemlige for enhver tilbakemelding!

Rapporter et problem

Gå til forumet

Vis koden og fiks selv