Ronde knoppen die uit elkaar vallen

Hier boven zie je drie ronde knoppen. Als je er met de muis overheen gaat, worden ze groter en vallen ze in stukjes uit elkaar. Ook verandert de kleur rond de letters. Als je er op klikt verschijnt er een alert met de melding dat er op is geklikt. Op een aanraakscherm houd je de knoppen even vast om het effect te zien. Als er ook een muis beschikbaar is werkt alleen die, het scherm vasthouden werkt dan niet.

Dit is een vrije bewerking van een script dat ik aantrof in Webdesigner Magazine nr. 90 (oktober 2016), pag. 18 e.v. Dit blad wordt sinds eind november 2017 niet meer gemaakt.
Het oorspronkelijke script is niet meer beschikbaar op internet. De maker van het script is niet bij het betreffende artikel genoemd.

Voor deze website is het voorbeeld verfraaid en uitgebreid.

• Er worden twee items besproken:
  1. De werking van het script.
  2. Toepassen in je eigen site.
   
• De werking van het script
• Het script bestaat uit HTML, CSS en JavaScript (jQuery).
   
• HTML
• De HTML5-structuur is hier van belang:
  
  • De knoppen worden bij elkaar gehouden door een wrapper. Dat is een <div-tag met de klasse wrapper. Dit zorgt er ook voor dat de knoppen netjes gecentreerd op het scherm staan.
  • Elk van de knoppen staat binnen een eigen wrapper. Dat is een <div-tag met de klasse wrapped (let op de spelling). Dit is nodig om de drie knoppen naast elkaar te krijgen.
    N.B.: Als je maar één knop nodig hebt kun je de wrapped weglaten.
  • De knoppen zelf zijn <div>-tags met klasse explosive en een uniek id. Het id wordt gebruikt om de knoppen aanklikbaar te maken. Animatie van de knoppen loopt via CSS en explosive.
  • De laatste <div>-tag bevat nog twee andere <div>'s: De eerste bevat de knoptekst; de tweede is leeg. Daar worden de losse stukjes van de knop in gezet, door het JavaScript.
   
• CSS
• De klasse wrapper dient om de knoppen te positioneren op het scherm.
• De klasse wrapped dient om de knoppen te positioneren ten opzichte van elkaar
• De klasse explosive toont de knoppen met de animatie:
  
  • De begin-afmetingen van de knoppen: height en width (hier: 4em) kun je aanpassen;. Houd ze wel gelijk aan elkaar.
  • Met het verkleinen van de border-radius zijn leuke effecten te bereiken, bijvoorbeeld op 10%. Groter maken dan 50% is niet zinvol.
  • De overgang (transition) van 'gewoon' naar 'vergroot' duurt hier 0.5 seconde voor width en height. Door die ongelijk te maken kunnen leuke effecten bereikt worden. Merk op dat ook andere overgangen van width en height in de CSS aangepast moeten worden.
• Het blokje waar de knoptekst in staat wordt geanimeerd met .explosive > *:first-child.
• De kleuren van tekst en achtergrond zijn vrij in te stellen.
• De waarde van min-width en min-height alsmede de tijdsduur van de overgang kunnen worden aangepast.
• Aanbevolen wordt om de andere zaken onveranderd te laten.
• Het uit-elkaar-vallen van de knop in stukjes wordt geregeld met .explosive > *:last-child en .explosive > *:last-child span. Je kunt alle eigenschappen naar eigen inzicht wijzigen.
  
  • De kleur van de achtergrond is vrij in te stellen.
  • De width en de height (in het voorbeeld: allebei 15%) kun je zelf aanpassen. Een lager getal geeft meer blokjes (particles). Als je dit verandert moet je de variabele particles in het JavaScript aanpassen. Er geldt: lager percentage (blokjes zijn kleiner) vraagt een hogere waarde van particles
  • De transition-parameters kun je naar eigen inzicht aanpassen.
  • De overige zaken zou je hier onveranderd moeten laten
• De eind-afmetingen van de knoppen als de muis er overheen gaat, staan in .explosive:hover. Houd ze wel gelijk aan elkaar.
• De opmaak van het blokje met de knoptekst als de muis er overheen gaat, staat in .explosive:hover > *:first-child.
  
  • De kleuren van tekst en achtergrond zijn vrij in te stellen.
  • Laat de rest onveranderd.
• De breedte van de randen tussen de lossen blokjes, als de muis er overheen gaat, staat in .explosive:hover > *:last-child.
  
  • Houd de waarde van margin klein in verhouding tot de afmetingen van de blokjes, anders gaat het effect verloren.
  • Overdrijven kan ook. Maak de waarde bijvoorbeeld gelijk aan height en width in .explosive > *:last-child span. Dat geeft een leuk effect.
  
   
• JavaScript
• He Javascript is alleen actief bij het laden van de pagina.
• Allereerst wordt de tweede <div>-tag van elke knop gevuld met 30 particles. Die worden elk in een <span>-tag gezet. Elk van deze tags bevat een stukje van de knop.
• Vervolgens wordt elke knop apart aanklikbaar gemaakt door er met addEventListener() een function aan te koppelen die een actie uitvoert (hier: aan alert toont). Dit verloopt via het unieke id van de <div>-tags met klasse explosive.
   
• Door het aanpassen van sommige waarden in de CSS (zie hier boven) kan het nodig zijn om de waarde van particles te verhogen. In sommige gevallen kan particles ook worden verlaagd. Het is een kwestie van proberen welke waarde van particles het beste werkt.
  N.B.: voor de instellingen van het voorbeeld zouden 23 particles voldoende zijn.
   
• Toepassen in je eigen site
• Dit is een jQuery-toepassing, dus je hebt JQuery nodig. Die betrek je het beste van een CDN. Het voorbeeld gebruikt versie 1.9.1, dat werkt prima.
   
• Download de .zip-file en pak hem uit. Bouw de code op zoals hieronder is aangegeven.
• Pas kleuren en afmetingen aan aan je eigen voorkeuren.
• Wees er op bedacht dat er maar heel weinig tekst in de knoppen past. Met twee letters heb je het wel gehad.

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="styles.css">
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
window.addEventListener("load",function(){
  var particles = 30;
  for(var i=0; i<particles; i++){
    $.each($(".explosive > *:last-child"),function(){
      var node = document.createElement("span");
      $(this).append(node);
    });
  }
  $("#Aa").on("click",function(){
    window.alert("Geklikt op knop A");
  });
  $("#Bb").on("click",function(){
    window.alert("Geklikt op knop B");
  });
  $("#Cc").on("click",function(){
    window.alert("Geklikt op knop C");
  });
});
</script>

(Zet dit in de <BODY> op de plaats waar de knoppen moeten verschijnen).

div class="wrapper">
  <div class="wrapped">
    <div class="explosive" id="Aa">
      <div>A</div>
      <div></div>
  </div>
  </div>
 
  <div class="wrapped">
    <div class="explosive" id="Bb">
      .
      .
      .
    </div>
  </div>
</div> <!--wrapper-->

Downloaden:
 
Druk op de knop:  File: voorb538.zip, 1187 bytes.

Opmerking:
 
Als je met de muis over één van de knoppen gaat, bewegen ze alle drie naar beneden. Eigenlijk is dat ongewenst.
Het is een zij-effect van de CSS. Ik heb geen oorzaak gevonden, daarmee weet ik ook niet hoe het te voorkomen. Weet jij het wel? Stuur me een mailtje!