OPGAVER TIL HTML & CSS – JS – MOUSEMOVE EFFEKT
Opgave 8
Opgave 8 – Del 1
- Lav en ny pen i codepen.io
- Gå op i HTML boksen og skriv dette ind:
Opgave 8 – Del 2
Nu skal vi ned i CSS’en. Her skal bi beskrive body og klassen text.
body {
overflow: hidden;
height: 100vh;
touch-action: none; /*forhindrer at man kan zoome eller andet med fingrene*/
}
.text {
font-size: 20px;
font-family: verdana;
}
Opgave 8 – Del 3
Nu skal vi designe klassen .dot i CSS’en, som skal bruges i JS delen. Vi skal sørge for at JS delen kan kalde på noget visuelt, det beskriver vi i klassen i CSS’en.
.dot {
position: absolute;
background-color: lightblue;
height: 0;
width: 0;
border-radius:50%;
left: 0;
top: 0;
visibility: hidden;
animation: color1 1s ease-in-out;
transition: 2s;
/*origin position gør at cirklerne trækker til højre når de skaleres ned*/
transform-origin: 100% center;
}
@keyframes color1 {
0% {filter: hue-rotate(10deg); visibility: visible}
100% {filter: hue-rotate(370deg); visibility: hidden; transform: scale(0)}
/*prøv at også at tilføje rotate(360deg) for vildere effekt*/
}
Læg mærke til at både height, width, top og left er sat til 0. Dette er fordi vi beskriver hvordan størrelse og placeringen er i JS delen.
Opgave 8 – Del 4
Nu skal vi ned i JS delen og lave vores “onmouseover” som er vores function(e). e kan være lige det bogstav man vil bruge, jeg har valgt e, for event:
Okay lad os brække det lidt ned i bidder.
onmousemove, kalder på musen, når den bevæger sig. Functionen afklarer hvad der skal ske med den viden.
Vi laver en variabel(let) og kalder den size. Når den bruges kan man få random størrelse på.
Vi laver to variabler til, en for e (eventet som står i parantes i funktionen), den kalder vi pos. Den anden kalder vi dot.
Lige under fortæller vi at dot faktisk skal skabe div elementer.
Under igen fortæller vi også at dot har et tilhørende klassenavn(ergo det som beskriveer den visuelt)
Så fortæller vi lidt om hvor div’erne skal placeres med top og left positioner og endelig fortæller vi at størrelsen på div’erne skal variere i size som gøres randomly.
Til allersidst fortæller vi at der skal tilføjes(append) div’er(børn/Children) når musen bevæger sig.
HUSK at tilsætte setTimeout og fjern nu alle div’erne igen efter 1s = 1000.
Ellers crasher det og maskinen!
Det er faktisk bare det
Opgave 8 – Del 5
Nu laver vi præcis same funktion, eller næsten altså. For denne gang skal det være for “touchmove” og vi fjerner også pos fra kode. Se med her under og skriv det ind, så
