Animeren met @keyframes II: Stuiterende bal

Bij het laden van de pagina zie je een bal die een paar keer stuitert en dan stopt. Op deze pagina wordt uit de doeken gedaan hoe je zoiets kunt maken. De code kun je downloaden om zelf te gebruiken, inclusief de plaatjes.

Dit is een vrije bewerking van een item dat ik heb aangetroffen in Wedesigner 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 en het gras zijn 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 ruimte waarbinnen waarbinnen de bal stuitert. De bal zelf zit in een <div>-tag met class ball.
• Onder de container, maar wel binnen de wrapper, zit het gras. Het is een <div>-tag met class grass.
   
• De animatie wordt geregeld door CSS. De bal en het gras zijn .PNG-plaatjes. Er komt geen JavaScript aan te pas.
• De animatie start 1000ms (= 1 seconde) nadat de pagina geheel geladen is. De animatie zelf duurt 2.5 seconde.
• De container is het beste even breed als de diameter van de bal (= 75px). De hoogte is het beste gelijk aan de diameter van de bal + de valhoogte(= 75 + 255 = 330px). De container is iets naar links verschoven, zodat de bal netjes in het midden van het gras valt: left:30px.
  Dit is gelijk aan ½(breedte gras-diameter bal) = ½ (135 -75).
  De container moet netjes binnen de wrapper blijven. Dat gebeurt met position:relative.
• Het stuiter-effect wordt gemaakt met transform:translateY() in de keyframes ball-y (Een positieve Y-verplaatsing is naar beneden op het scherm).
  
  • Beginnend vanaf nul wordt de bal 255px naar beneden verplaatst. Dat wordt bereikt op 25% van de animatie-duur.
  • Vervolgens gaat de bal terug omhoog naar 55px op 40% van de animatie-duur.
  • Daarna gaat de bal weer naar beneden, tot 255px op 55% van de animatie-duur,
  • waarna deze weer omhoog gaat tot 170px op 65% van de animatie-duur. De bal stuitert dus minder hoog dan de eerste keer
  • Enzovoort.
• Om te zorgen dat de bal aan het einde van de animatie beneden blijft liggen (en dus niet weer terug omhoog gaat), heeft de class ball de eigenschap animation-fill-mode:forwards.
   
• De class grass heeft een .PNG-plaatje op de achtergrond, dat het gras laat zien. Het is een beetje omhoog geschoven (top:-15px), zodat de bal in het gras ligt. Het effect wordt versterkt door het gras vóór de bal te plaatsen: z-index:1.
   
• Inbouwen in je eigen site
• Zet de code uit de downloadfile op hun plaats in het document, zoals hieronder wordt getoond.
• De benodigde CSS staat in de file style456.css. De inhoud van die file moet je veranderen voor je eigen toepassing:
  • De positie in je document. Dat doe je in wrapper.
  • Als je andere plaatjes wilt gebruiken, dan is dat natuurlijk mogelijk. Maak de width van de klassen wrapper en grass gelijk aan de breedte van gras.png (hier: 135 px). Maak de breedte van container gelijk aan de breedte van voetbal.png (hier: 75px).
  • Als de breedte van het gras of de bal veranderen, zou je ook de positie van container binnen wrapper kunnen aanpassen.
  • Als je het stuiteren van de bal wil aanpassen, moet je de @keyframes aanpassen. Dat is lastig. Je doet het als volgt:
    • Er is een aantal percentages gegeven: 40%, 65%, 82% en 92%. Hierbij staat een translateY(), die aangeeft hoeveel de bal naar beneden is bewogen als die op het hoogste punt van de stuitbeweging is gekomen. Wees er op bedacht dat er van boven naar beneden wordt gemeten.
    • Een tweede set percentages ( 25%, 55%, 75%, 87%, 97% en 100%) geeft aan wanneer de bal op het laagste punt is: translateY(255px).
    • De percentages staan niet in chronologische volgorde, maar voor CSS is dat niet nodig.
    Pas de percentages of translateY() aan naar je eigen inzicht. Met een beetje geduld kom je ver.
   
• Tenslotte
• Uitleg over de CSS-eigenschappen die hier worden gebruikt vind je o.a. in de items: Over @keyframes en Over transitions.

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="style465.css">

(Zet dit in de <BODY>, op de plaats waar het effect moet verschijnen.

<div class="wrapper">
  <div class="container">
    <div class="ball"></div>
  </div>
  <div class="grass"></div>
</div>

Downloaden:
 
Druk op de knop:  File: voorb465.zip, 11 676 bytes.