OPGAVER TIL HTML & CSS – ANIMATION – BONUS 2
Opgave 2
Opgave 2 – Del 1
- Lav en ny pen i Codepen.io
- Lav en div’boks og giv den class “star1”
- Lav nu endnu et søster til 1. div boks og giv den class “star2”
Således her
< div class=”star1″>< /div >
< div class=”star2″>< /div >
Opgave 2 – Del 2
Nu skal vi så lave klasserne i CSS’en til .body og .star1. Her skal der bruges et billede til stjernerne, linket kommer her:
body {
height: 100vh;
overflow: hidden;
background-color: #000;
}
.star1{
position: absolute;
background: url(https://mom2day.dk/wp-content/uploads/2020/12/snowflakeBG1GIF.gif);
background-repeat: repeat;
width: 100%;
height: 800px;
position: absolute;
top: 0;
left: 0;
animation: animateOne 10s infinite linear;
background-size: 400px;
animation-name: funcle;
animation: funcle 20s linear infinite;
}
(Sørg for at vælge et billedet i formatet GIF, så baggrunden er transparent.)
.https://mom2day.dk/wp-content/uploads/2020/12/snowflakeBG1GIF.gif
Opgave 2 – Del 3
Nu skal vi så have animeret stjernerne:
@keyframes funcle {
0% {opacity: 0;}
20% {opacity: 1;}
40% {opacity: 0;}
60% {opacity: 1;}
80% {opacity: 0;}
95% {opacity: 1;}
100% {opacity: 0;}
}
@Keyframesene er sat til at være synlige (1) og usynlige (0) ved at justere på opacity’en.
Det er vigtigt at man starter og slutter på samme værdier i ens keyframes, hvis man ønsker at loope(infinite) sin animation, ellers kommer der ikke en glidende overgang når det går fra 100% til 0%.
Opgave 2 – Del 4
Næste lag af stjerner skal nu kodes i CSS’en.
Det gør vi ved at kopiere(ctrl+c) .star1 og dertil @keyframe funcle og sætter ind neden under(ctrl+v).
Dog skal der tilføjes nogle ændringer for at lagene ikke bare ligger oven i hinanden.
Ændringerne ser således ud:
.star2{
position: absolute;
background: url(https://mom2day.dk/wp-content/uploads/2020/12/snowflakeBG1GIF.gif);
background-repeat: repeat;
width: 100%;
height: 800px;
position: absolute;
transform: rotate(180deg);
top: 0;
left: 0;
animation: animateOne 10s infinite linear;
background-size: 300px;
animation-name: funcle1;
animation: funcle1 20s linear infinite;
}
@keyframes funcle1 {
0% {opacity: 1;}
10% {opacity: 0;}
20% {opacity: 1;}
30% {opacity: 0;}
40% {opacity: 1;}
50% {opacity: 0;}
60% {opacity: 1;}
70% {opacity: 0;}
80% {opacity: 1;}
90% {opacity: 0;}
100% {opacity: 1;}
}
Opgave 2 – Del 5
I denne del skal vi sætte yderligere 2 div bokse ind.
< div class="glow"></div>
< div class="sun"></div>Grunden til at der er 2 “sole” er at den ene sol har en ydre skygge/glow og den anden sol en indre skygge.
Opgave 2 – Del 6
I denne del skal vi lave klassen til .glow
Solen tegnes med glød/glow:
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.
.glow {
position: absolute;
margin-left: 470px;
margin-top: 150px;
height: 200px;
width: 200px;
border-radius: 50%;
background-image: linear-gradient(yellow,red);
animation-name: glow;
animation: glow 20s linear infinite;
}
Solen glød/glow placeres:
Solens position skal være absolute da den skal ligge oven på stjernerne der bliver også tilføjet en box-shadow som er solen skær.
(Hvis det er ønsket at lave animationen flexibel/responsive bør der bla benyttes % i stedet for px her.)
Reference til keyframe:
Til sidst referer vi til den keyframe vi laver neden under, med animations navnet “glow” på 20s afspilning. Selve afspilningen vil ramme en anden farve når månen skygger for solen.
@keyframes glow {
0%{box-shadow: -3px -5px 30px 30px yellow;}
40%{box-shadow: -3px -5px 30px 10px yellow;}
47%{box-shadow: -3px -5px 30px 10px #E34000;}
50%{box-shadow: -3px -5px 30px 5px #E34000;}
60%{box-shadow: -3px -5px 30px 5px #E34000;}
65%{box-shadow: -3px -5px 30px 10px #E34000;}
70%{box-shadow: -3px -5px 30px 10px yellow;}
100%{box-shadow: -3px -5px 30px 30px yellow;}
}
Opgave 2 – Del 7
Nu skal solen skrives ind i html’en og refereres til i CSS’en
Så vi starter med at lave en ekstra søster div boks:
< div class=”sun”>< /div>
Nede i CSS’en skal der så laves en tilhørende klasse:
.sun {
position: absolute;
margin-left: 470px;
margin-top: 150px;
height: 200px;
width: 200px;
border-radius: 50%;
background-image: linear-gradient(yellow,red);
box-shadow: -5px -10px 20px black inset;
}
Den forreste sol skal ikke bevæge sig det er kun for at kunne tildele en indre skygge den er der.
Opgave 2 – Del 8
Nu til aller sidste del, nemlig månen!
Så vi starter med at lave en ekstra søster div boks:
< div class=”moon”>< /div>
Nede i CSS’en skal der så laves en tilhørende klasse:
.moon {
position: absolute;
margin-top: 650px;
height: 200px;
width: 200px;
border-radius: 50%;
background-color: black;
transform-origin: 300% center;
animation-name: move;
animation: move 40s linear infinite;
}
Denne skal dog have @keyframes for at flytte på sig
@keyframes move {
0%{ transform: rotate(-360deg); box-shadow: -10px 15px 20px #E34000 inset;}
20%{ transform: rotate(-275deg); box-shadow: -10px 15px 20px #E34000 inset;}
30%{ transform: rotate(-270deg); box-shadow: -10px 15px 20px #E34000 inset;}
50%{ transform: rotate(-180deg); box-shadow: -10px -15px 20px #4D1400 inset;}
70%{ transform: rotate(-270deg); box-shadow: -10px 15px 20px #E34000 inset;}
80%{ transform: rotate(-275deg); box-shadow: -10px 15px 20px #E34000 inset;}
100%{ transform: rotate(-360deg); box-shadow: -10px 15px 20px #4D1400 inset;}
}
Bemærk at den drejer kun en halv omgang rundt og det er minus grader,
da det kun er toppen af cirklen(som den drejer rundt) vi ønsker at bruge.
Så den starter 300% fra dens placering med -360deg og drejer i alt kun
180deg (altså til -180deg) da vi kun skal bruge en halvbue.