HTML & CSS

OPGAVE TIL HTML & CSS – ADVANCED – ANIMATION – MIDDEL 6

Opgave 6

Opgave 6 – Del 1

Åben en ny PEN i CODEPEN.IO
Start med at lave den yderste div boks med klassen scene1

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

Nu skal du tilføje klassen for body og scene1 i din CSS.

body {
background-color: black;
overflow: hidden;
}
.scene1 {
position: relative;
}

Opgave 6 – Del 2

Nu skal lave 3 children/børn i den første div. Stil dig mellem de to div tags og tryk enter. Sæt nu denne div boks ind:

< div class=”scene1″ >
  < div class=”stativ-v” >< /div >
  < div class=”stativ-t” >< /div >
  < div class=”stativ-h” >< /div >
< /div >

Gå ned i dit CSS og lav din klasse til stativ-v, stativ-t og stativ-h
Du vælger selv farven for din ramme 🙂

.stativ-v {
  position: absolute;
  margin-top: 100px;
  margin-left: 150px;
  height: 350px;
  width: 10px;
  background-color: grey;
}
.stativ-t {
  position: absolute;
  margin-top: 100px;
  margin-left: 150px;
  height: 10px;
  width: 700px;
  background-color: grey;
}
.stativ-h {
  position: absolute;
  margin-top: 100px;
  margin-left: 850px;
  height: 350px;
  width: 10px;
  background-color: grey;
}

Når vi benytter position: absolute; gør det, at det er muligt for andre objekter kan placere sig ovenpå eller under dette objekt.

Margin er afstand fra hvor objektet oprindeligt er placeret. Her kan man så tilføje left, top, right og top, for at flytte rundt på objektet.

Opgave 6 – Del 3

Gå op i HTML’en igen og lav disse div bokse under stativ-h div’en

< div class=”string1″ >
< div class=”ball1″ >< /div >
< /div >

Kopier dette og stil dig så efter < /div > og tryk enter. Sæt nu det kopierede ind 4 gange.
Husk at ændre tallene på string1, således:

  < div class="string1" >
    < div class="ball1" >< /div >
  < /div >
  < div class="string2" >
    < div class="ball1" >< /div >
  < /div >
  < div class="string3" >
    < div class="ball1" >< /div >
  < /div >
  < div class="string4" >
    < div class="ball1" >< /div >
  < /div >
  < div class="string5" >
    < div class="ball1" >< /div >
  < /div >

Opgave 6 – Del 4

Gå ned i CSS’en igen og tilføj klassen for string1, string2, string3, string4 og string5:

.string1 {
  position: absolute;
  margin-top: 100px;
  margin-left: 300px;
  width: 2px;
  height: 200px;
  background-color: grey;
  transform-origin: top left;
  animation: sving1 2s infinite linear;
}
.string2 {
  position: absolute;
  margin-top: 100px;
  margin-left: 400px;
  width: 2px;
  height: 200px;
  background-color: grey;  
}
.string3 {
  position: absolute;
  margin-top: 100px;
  margin-left: 500px;
  width: 2px;
  height: 200px;
  background-color: grey;  
}
.string4 {
  position: absolute;
  margin-top: 100px;
  margin-left: 600px;
  width: 2px;
  height: 200px;
  background-color: grey;  
}
.string5 {
  position: absolute;
  margin-top: 100px;
  margin-left: 700px;
  width: 2px;
  height: 200px;
  background-color: grey;
  transform-origin: top left;
  animation: sving5 2s infinite linear;
  animation-delay: 1s;
}

Når vi bruger transform-origin, kan vi vælge fra hvilket punkt centrum er på objektet. Dette skal vi bruge når vi animerer og skal have et centrum placering for animationen. her vil vi gerne at det er på toppen af snorene.

På den første snor og den sidste snor, sætter vi en animations-delay på. Dette for at de ikke kører på samme tid, og for at det er nemmere at lave vores animation.

Opgave 6 – Del 5

Bliv i CSS’en og tilføj klassen for ball1 og animationen dertil:

.ball1 {
  position: absolute;
  margin-top: 200px;
  margin-left: -50px;
  width: 100px; 
  height: 100px;
  border-radius: 50%;
  background-image: radial-gradient(circle at top, hsl(var(--hue, 0), 100%, 75%), hsl(var(--hue, 0), 100%, 0%));
  animation: dot1 5s linear infinite;
}
@keyframes dot1 {
  from {filter: hue-rotate(360deg);}
}

Når vi bruger filter: hue-rotate, så kan vi sætte et filter på, der får farven til at skifte med farvepaletten hele vejen rundt, derfor bruger man også 360deg (grader).

Opgave 6 – Del 6

Nu er du nået til den allersidste del i CSS’en. Tilføj animationerne til string1 og string5:

@keyframes sving1 {
  0% {transform: rotate(32deg);}
  20% {transform: rotate(0deg);}
  80% {transform: rotate(0deg);}
  100% {transform: rotate(32deg);}
}
@keyframes sving5 {
  0% {transform: rotate(-32deg);}
  20% {transform: rotate(0deg);}
  80% {transform: rotate(0deg);}
  100% {transform: rotate(-32deg);}
}

Når man bruger almindelige tal bevæger rotationen sig fra højre mod venstre og rundt altså med uret. Når vi bruger negative tal er det den modsatte vej. Her skal vi ikke have de yderste kugler til at gå længere end 32 grader til hver side. Når tallet bliver større (med eller uden minus) svinger de ud, når tallet bliver 0 står de stille.