Animeren met @keyframes I: Bal aan een touwtje

Hier rechts zie je iets wat lijkt op een ouderwets .GIF-plaatje. Dat is het echter niet, het is helemaal gemaakt met CSS. Plaatjes of JavaScript komen er niet aan te pas, alleen wat HTML om het in het document op te nemen.

Dit is een vrije bewerking van een item dat ik heb aangetroffen in Webdesigner Magazine nr. 72 (2014) pag. 52 e.v.
Dit blad wordt sinds november 2017 niet meer gemaakt.
Het oorspronkelijke artikel en de code zijn op internet niet meer te vinden. Het enige dat ik er over weet is dat het is gemaakt door Neil Pearce, een designer uit Essex, Engeland.

• Er worden twee items besproken:
  1. De werking van het script.
  2. Inbouwen in je eigen site.
   
• De werking van het script
• De bal is opgesloten in een <div>-tag met de class wrapper. Deze wordt alleen gebruikt om de figuur te positioneren in het document.
• Binnen de wrapper zit de class container. Ook dit is een <div>-tag. Hij omsluit de <div>-tags waarmee de uiteindelijke figuur wordt gemaakt.
• De figuur bestaat uit drie onderdelen, die elk zijn ingebouwd als <div>-tag:
  • Het touwtje, class line. Het is een rechthoek van 2px breed en 100px hoog. De background-color is zwart. Hij is zo gepositioneerd dat de lijn symmetrisch staat ten opzichte van de bal. De top zit (in dit voorbeeld) 10px boven de rand van de container.
  • De bal, class ball. Het is een vierkant met afgeronde hoeken. De straal is de helft van de breedte en de hoogte, waardoor de cirkel ontstaat.
  • De schaduw, class shadow, is een rechthoek afgeronde hoeken. De straal is de helft van de breedte, waardoor de ellips ontstaat.
  • Zie het item Cirkels en ellipsen tekenen met CSS voor meer informatie over hoe je cirkels en ellipsen maakt met behulp van CSS.
• Het touwtje is statisch, het wordt niet geanimeerd. Het bevindt zich achter de bal en is lang genoeg om altijd een stukje achter de bewegende bal te blijven. Daardoor lijkt het alsof het touwtje langer en korter wordt, maar dat is dus niet zo.
• De bal wordt geanimeerd met behulp van
    animation:moving ease-in-out 2s infinite;.
• De schaduw wordt geanimeerd met behulp van:
    animation:shadow ease 2s infinite;.
• Zie het item Over @keyframes voor meer informatie over animation.
• Het mooiste 'overvloei' effect ontstaat met ease-in-out voor de bal en ease voor de schaduw. Zie het item Bezier-krommen gebruiken in CSS-animaties voor meer informatie over ease en ease-in-out.
• De woorden moving en shadow verwijzen naar @keyframes-sets, die beschrijven hoe de animatie door de tijd verloopt.
• De duur van één animatie-cylus is 2 seconden, voor zowel de bal als de schaduw. Dat is nodig om te zorgen dat de bal en de schaduw met elkaar in de pas lopen.
• Beide animaties hebben het keyword infinte, dat betekent dat ze oneindig worden herhaald. Ze stoppen niet vanuit zichzelf.
   
• De keyframes beschrijven één volledige animatie-cyclus. Voor de bal is dat een keer omlaag gevolgd door een keer omhoog. Voor de schaduw is dat een keer groter worden gevolgd door weer kleiner worden.
• Als de bal op zijn laagste punt is, is 50% van de cyclus voltooid. De bal is 90px naar beneden verplaatst (top was 0, nu 90px). Verder is de bal 10% in verticale richting uitgerekt. Dat is gebeurd door transform:scaleY(1.1).
• Als de bal weer op zijn hoogste punt is (de cyclus is voor 100% voltooid), is de top weer 0. De schaalfactor wordt bij 100% niet genoemd en is –dus– weer gelijk aan 1 (de bal is weer rond).
• Bij de schaduw worden de transparantie en de marges gevarieerd. Als de bal op zijn laagste punt is (50%), is de opacity gelijk aan 0.8 (minder doorzichtig). Wel is de schaduw kleiner gemaakt door de marges links en rechts op 21% (van de breedte van decontainer) te zetten.
• Als de cyclus voltooid is (100%) staat de opacity weer op 0.1. De marges worden niet genoemd en staan –dus– weer op 0.
   
• Inbouwen in je eigen site
• Zet de code in je document zoals hieronder is aangegeven. Dat volstaat om het aan het draaien te krijgen.
• Natuurlijk wil je er het een en ander aan veranderen. Dat doe je door de de inhoud van het bestand style463.css aan te passen.
  Houd daarbij rekening met:
  • De breedte van de wrapper moet niet kleiner zijn dan de breedte van de container.
  • De hoogte van de container moet ten minste gelijk zijn aan de diameter (height) van de ball + de hoogte van de animatie (hier: 90px) + ruimte voor de schaduw. In het voorbeeld is de container 280px hoog.
  • De schaduw moet zich ver genoeg onder bal bevinden, dat wil zeggen: de diameter van de bal (hier: 150px) + de hoogte van de animatie (hier: 90px) + een beetje (hier: 10px).
  • De shadow wordt relatief gepositioneerd ten opzichte van de onderkant van de bal in de bovenste positie. De animatie is 90px hoog. Er blijft 10px vrij tussen de bal in de laagste positie en de schaduw, dus de top is gelijk aan 100px.
  • Het touwtje begint 10px boven de container, dus: top:-10px.
  • De hoogte van line (de lengte van het touwtje) is gelijk aan het uitstekende deel buiten de container (10px) + de lengte van de animatie (90px) + een beetje (5px), totaal 105px.
  • De dikte van het touwtje is 6px. De positie left is 72px. Dat is de diameter van de bal - dikte van het touwtje, en daar de helft van.
     
  • Merk op dat de diameter van de bal een even getal moet zijn om een netjes ronde bal te maken. Daardoor moet ook de dikte van het touwtje een even getal zijn.
   
• De beweging begint zodra de pagina is geladen. Daar hoef je zelf dus niets aan te doen.

Gebruik:

• De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code van het voorbeeld ziet er als volgt uit:
 
(Zet dit in de <HEAD>).

<link rel="stylesheet" href="style463.css">

(Zet dit in de <BOdY>, op de plaats waar de figuur moet komen).

<div class="wrapper">
  <div class="container">
    <div class="line"></div>
    <div class="ball"></div>
    <div class="shadow"></div>
  </div>
</div>

Downloaden:
 
Druk op de knop:  File: voorb463.zip, 803 bytes.