Javascript

OPGAVER TIL HTML & CSS – JS – CIRKLER

Opgave 4

Opgave 4 – Del 1

Først skal vi igennem disse trin for at skabe vores Cirkler

Lav en ny pen i codepen.io
Lav 1 div boks i din HTML del og giv den klassen “position_1” og samme med id’en
Lav derefter disse div bokse(se billede) inden i med tilsvarende klasser og id’er
Husk at tilføje onclick functioner, så de kan reagere på knappernes klik.

Således her:

Opgave 4 – Del 2

Tilføj dette i din CSS box:

body {

background-color: black;

overflow: hidden;

}

.position_1 {

position: absolute;

margin-left: 25%;

margin-top: 5%;

height: 500px;

width: 500px;

border-radius: 50%;

box-shadow: 0 0 50px #03e9f4;

-webkit-box-reflect: below 1px linear-gradient(transparent, #0005);

}

Lige nu er vi ved at sætte baggrunden op som er body og hvor cirklerne skal placeres med .position_1.

Opgave 4 – Del 3

Nu bygger vi den store cirkel(cirkel_1) som de mindre animerede cirkler er oven på.

.circle_1{
position: absolute;
height: 500px;
width: 500px;
border-radius: 50%;
background-image: linear-gradient(90deg, #350569, purple);
animation: rotateC 5s infinite linear;
}
@keyframes rotateC{
from{ transform: rotate(-360deg); }
to{ transform: rotate(360deg); }
}

Denne cirkel drejer non-stop rundt. Det er kun de mindre der kan styres.

Opgave 4 – Del 4

Nu skal vi til at lave den første kugle(Blå) circle_2 der drejer rundt og dens baby den som hedder circle_2-a:

Opgave 4 – Del 5

Nu skal vi så til at designe den orange cirkel og dens baby.

Læg mærke til at den første cirkel hedder 1, og de mindre cirkler hedder hhv 2 og 2-a, 3 og 3-a og 4 og 4-a

Opgave 4 – Del 6

Nu skal vi lave den sidste cirkel og dens baby, de lillae.

Opgave 4 – Del 7

Kod nu babyen til cirklen

Opgave 4 – Del 8

Så lang så godt. Nu mangler vi at sætte @keyframes ind for baby cirklernes animation

@keyframes rotateC1{
from{ transform: rotate(-360deg); }
to{ transform: rotate(360deg); }

Opgave 4 – Del 9

Vi gemmer animationen linket fordi den ikke skal køre på nær i JS, men man kan aktivere den til at se om det virker 😉

Opgave 4 – Del 10

Vi skal nu tilbage og lave det sidste i CSS koden 🥳 Vi skal nu lave knapperne og hvordan de ser ud når vi holder musen over.

Lav nu button_1. Kopier koden her og sæt ind for button_2 og button_3 husk at ændre farverne så de matcher cirklerne blå, orange og lilla/pink:

.button_1 {

position: absolute;

margin-left: 5%;

margin-top: 100px;

width: 80px;

height: 50px;

border-radius: 50px;

background-color: lightblue;

color: white;

font-size: 18px;

box-shadow: -5px -10px 20px 7px #050C54 inset;

cursor: pointer;

}

.button_1:hover {

cursor: pointer;

box-shadow: 0 0 5px #03e9f4;

color: black;

-webkit-box-reflect:below 1px linear-gradient(transparent, #0005);

}

Opgave 4 – Del 11

Nu skal vi have kigget på at linke til JavaScript filen der styrer scriptet så det virker

Gå ind på tandhjulet på JS boksen og skriv linket her ind:

https:// ajax. googleapis. com/ajax/libs/jquery/3.5.1/jquery.min. js