1.1.4 – CSS Animation – scene

Tema 3 – 1.1.4 – CSS Animation

Opgavebeskrivelse: “Du skal lave en webside med en scene hvor der kører tre animationer. Scenen er et landskab, en grøn bakke med en vindmølle, og en blå himmel med nogle skyer. Du skal placere vindmøllen, skyen og bolden som selvstændige div­elementer, og style deres udseende (og baggrundsbillede) med CSS. Brug de udleverede grafik­filer. Du skal derudover lave tre animationer: en bold der hopper, en sky der glider hen over himlen, og vindmøllens vinger der drejer rundt. Krav Grafik Du skal ikke tegne selv, men det står dig frit for om du vil benytte de udleverede billed­filer, eller selv finde nogle. Du skal dog benytte grafik/billeder til disse fem elementer: 1. Baggrund ­ landskab og himmel 2. Mølle 3. Møllevinger 4. Sky 5. Bold Sørg for at grafik­elementerne bevarer de rette proportioner ­ og at de tilpasser sig skærmstørrelsen, så din scene ser ens ud på alle skærme. Tre animationer 1. Sky der glider hen over himlen, og starter forfra når den er nået uden for skærmen/scenen. 2. Bold der hopper på samme sted, uendeligt, ikke noget med at den hopper mindre og mindre. 3. Vindmøllevinger der drejer rundt. Sørg for at animationerne kører med den rette “jævnhed”, f.eks. skal skyen og vindmøllevingerne ikke speede op og ned, men bolden bør nok ikke køre fuldstændig lige hurtigt op og ned. Sørg for at møllevingerne drejer rundt om den rette akse”.

 

Løsning:

http://www.kristofferrafn.dk/KEA01/mappestruktur/113_animation/Animation/Index.html