Javascript

 OPGAVER TIL HTML & CSS – JS – MOUSEMOVE EFFEKT

Opgave 8

Opgave 8 – Del 1

Først skal vi igennem disse trin
  • Lav en ny pen i codepen.io
  • Gå op i HTML boksen og skriv dette ind:
< div class=”text” >
  Træk musen hen over skærmen eller brug fingeren til tegne med.
< /div >

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.

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å 
   
     

Her under er koden eksekveret uden JS linket.

   
 
Brug Musen på toppen af siden, for at afprøve effekten

Ekstra opgave

1. Design med dine egne farver 
Hint: Du skal kigge på baggrundsfarven og filteret, i din css
2. Prøv om du kan skrive en funktion, som kaldes på ved både onmousemove, men også for touchmove