OPGAVER TIL HTML & CSS – ANIMATION – BONUS
Opgave 1
Opgave 1 – Del 1
- 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 >
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:
<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 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å Y aksen 200px.
Keyframe:
Den transformeres 100% med 200px på Y aksen. Så starter den på opacity 100% med 1 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