De dansende dotter i CSS

Du har nok lagt mærke til de tre dansende dots rundt omkring i aps og på nettet. Dem kan du nemt lave ved hjælp af CSS! Du skal faktisk kun bruge lidt kodestumper – så danser prikkerne på livet løs. Det hele kan laves direkte i en Joomla! artikel og i din custom.css fil – læs evt. først artiklen 'Custom CSS i Joomla!'.

Start med at indsætte nedenstående kode i din artikel. Du skal sætte din editor i kode tilstand for at kunne gemme den i artiklen. Når du har gemt artiklen kan du vende tilbage til almindelig editor og arbejde videre.

<div id="wave">
  <span class="dot1">
  <span class="dot2">
  <span class="dot3">
</div>

Den første div er en id med navnet wave og er den der indeholder de tre dots. Disse er alle lavet som span og med et class-navn så de kan beskrives i custom.css filen.

 

Styling og animering i custom.css

For at få dotterne vist skal du nu style dem i din custom.css fil hvor du også skal beskrive hvordan de animeres. Du skal starte med at definere hvordan selve containeren, der indeholder de tre dots:

#wave {
  position:relative;
  text-align: left;
  width: 70px;
  height: 40px;
}

 Herefter skal de enkelte dots styles:

.dot1, .dot2, .dot3 {
  display:inline-block;
  width:12px;
  height:12px;
  border-radius:50%;
  margin-right:3px;
  background:#303131;
}

 

For at de tre dots skal kunne bevæge sig skal du opsætte nogle regler for hvordan de bevæger sig. Her har jeg indsat den kode der får dem til at bevæge sig op og ned:

@keyframes wave {
  0%, 60%, 100% {
    transform: initial;
  }

  30% {
    transform: translateY(-15px);
  }
}

Den første linje fortæller at der sker noget i tidslinjen ved 0%, 60% og 100% – det sætter hvordan hastigheden af tidslinjen afvikles. Indrømmet – her har jeg ikke fundet den helt nøjagtige betydning – det vil jeg vende tilbage senere.

Hvis du kun indsætter ovenstående kode vil prikkerne stå stille, for de har endnu ikke fået besked på hvad de skal gøre i animationen. Her kommer koden til de enkelte prikker:

.dot1 {
  animation: wave 1.3s linear infinite;
}

.dot2 {
  animation: wave 1.3s linear infinite;
  animation-delay: -1.1s;
}

.dot3 {
  animation: wave 1.3s linear infinite;
  animation-delay: -0.9s;
}

Den første linje 'animation' fortæller at elementerne i 'wave' skal følge en standard linje animation. For at få det til at se ud som om prikkerne danser, skal de to næste prikker have en forsinkelse. Det får de i 'animation-delay'.

Det endelige resultat kommer til at se sådan her ud:

God fornøjelse.