HTML & CSS

 OPGAVER TIL HTML & CSS – ANIMATION – BONUS

Opgave 1

Opgave 1 – Del 1

Her skal vi tilføje glidende overgange til animationen
  • Lav et nyt dokument
  • Lav 1 div boks i din body
  • Tildel den klassen body1
  • Lav nu 3 div bokse inde i den div boks
  • Således her

    < div class=”body1″>
        < div >< /div >
        < div >< /div >
        < div >< /div >
    < /div >

Det 3 div bokse skal huse hhv. vores sol, måne og by. Dem laver vi klasser over: .sun, .moon, .by1
Men før du gør klasserne klar skal vi lige have lavet det hele responsive.
 
Tilføj dette i dit head og øverst inde i style, hvis ikke du bruger Codepen:
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<style>
     * {
     box-sizing: border-box;
     }

Opgave 1 – Del 2

Nu skal vi så sætte billedet ind. Du kan låne dette eller lave dit eget.
https://mom2day.dk/wp-content/uploads/2020/12/EndlessRunnerBG1.gif    

OBS: Sørg for at vælge et billedet i formatet GIF, så baggrunden er transparent.

Det skal være inde mellem den 3 div i den store div. Således

< div class=”body1″ >
    < div >< /div >
    < div >< /div >
    < div >< img src=”indsæt https://adresse på billedet” >< /div >
< /div >


Opgave 1 – Del 3

Gå op i din CSS og lav nu dine 4 klasser til:

.body{}
.sun{}
.moon{}
.by1{}

I .body skal vi have defineret div boksens
background-color:#ccccff;
margin: 0;
border: den skal være 2px og solid sort;
height:310px;
overflow-y:hidden;
overflow-x:hidden;
animation: sky 5.5s 2s forwards;

Hvor Y=lodret og X=vandret er skjult. Hvilket vil sige at der ikke er scrollbar på boksen, hvis billederne/animationen går ud over boksen, så skjules det. 

Vi tilføjer også en animation til baggrunden af boksen. den kalder vi sky. Der definer vi længden på animationen 5.5s og den skiftende overgang mellem farvene som vi tilføjer 2s fremad.


Opgave 1 – Del 4

Under .body i din CSS skal vi så have kodet @keyframes sky, som vi refererer til i .body
Du vælger selv hvornår den skal skifte fx ved 50% og til hvor mange lag, dog max gå til 100%. 

Du vælger selv farverne her også. Husk man kan definere farver på mange måder:
white 
#FFFFFF 
#FFF 
#111111
rgba(255, 0, 0, 1) – Hvor 1 er opasity, som går fra 0-1 fx 50% er 0.5

Opgave 1 – Del 5

I denne del skal vi lave klassen til .by1

 .by1{
padding-top: 155px;
position:relative;
}

Du justerer med padding-top hvor på siden billedet skal ligge. Der tælle 0 fra toppen af her.
position sætter vi til relative da vi gerne vil have den er forrest. 


Opgave 1 – Del 6

I denne del skal vi lave klassen til .sun og @keyframes sun

Solen tegnes:
Først skal vi lave en boks med baggrund, højde og bredde. Da solen ikke er firkantet skal vi have justeret på kassens ramme som skal være rund. Det gør vi med border-radius

Solen placeres:
Solens position skal være absolute og 50% fra venstre af, hvilket placerer den i midten i toppen.  

Solens glød:
Vi giver også boksen en glød med box-shadow deri en farve på gløden.

Reference til keyframe:
Til sidst referer vi til den keyframe vi laver neden under, med animation på 7s afspilning, opacity skift på 2 sekunder og fremad(transform) på aksen 200px.

Keyframe:
Den transformeres 100% med 200px på Y aksen. Så starter den på opacity 100% med og bevæger sig fremad 100% til 0 hvilket gør at den forsvinder til slut


Opgave 1 – Del 7

Til slut skal vi lave klassen til .moon og @keyframes night

Månen tegnes:
Først skal vi lave en boks med baggrund, højde og bredde. Da solen ikke er firkantet skal vi have justeret på kassens ramme som skal være rund. Det gør vi med border-radius

Månen placeres:
Månens position skal være absolute og 10% fra venstre af og 5px fra toppen, hvilket placerer den oppe i venstre hjørne.  

Månens glød:
Vi giver også boksen en glød med box-shadow deri en farve på gløden. Læg mærke til det negative tal -20% og 10px.

Reference til keyframe:
Til sidst referer vi til den keyframe vi laver neden under, med animation på 7s afspilning, opacity skift på 0.8 sekunder og fremad

Keyframe:
Den starter på opacity 0 og bevæger sig til 100% fremad til 1

   
     

Her under vises/eksekveres koden. Denne er loopet

   
 

Ekstra opgave

1. Design en GIF med stjerner på og kod klassen .stjerner med en tilhørende @keyframes stars 
Hint: Den skal være den samme som .moon uden højde, bredde eller border. Men vises som .by1 bare med padding-top: 0px;
2. Loop animationen
Hint: Brug infinite alternate til at få animationen til at kører uendeligt i denne rækkefølge: 
fremad->baglæns-> og så forfra