Aftellen tot een bepaalde datum III: Geanimeerde aftelklok
Hieronder zie je een aftelklok. Die telt af naar een denkbeeldige gebeurtenis. Die begint over 11 dagen, 13 uren, 46 minuten
en 39 seconden.
Om elk getal staat een grijze cirkel, waarvan een deel gekleurd is. Bij de seconden zie je duidelijk dat het gekleurde deel
steeds groter wordt. Bij de minuten zie je dat ook, mits je geduld hebt. Bij de uren en de dagen moet je erg lang wachten
voor je verandering ziet.
Deze klok wordt gemaakt met een jQuery-plugin die luistert naar de naam 'Classy Countdown'. Op deze pagina wordt getoond hoe je die gebruikt.
Om deze klok te kunnen toepassen in je eigen site, heb je ervaring nodig met CSS en jQuery. Anders is het heel lastig.
- Besproken wordt:
- De oorsprong van het script.
- Een algemene beschrijving.
- Inbouwen in je eigen site.
- De oorsprong van het script
- Deoorspronkelijke versie van deze jQuery-plugin in gemaakt door Marius Stanciu - Sergiu, een webontwikkelaar uit
Boekarest, Roemenië. Her wordt nu onderhouden op GitHub
door de Rus Arsen Bespalov. Het staat ook op
jQueryscript.net.
- Algemene beschrijving
- Omdat dit een jQuery-plugin heb je jQuery zelf nodig. Op deze bladzijde is versie 1.10.2 gebruikt. Het beste betrek je die van een CDN.
- Feitelijk is dit een toepassing van knob.js en throttle.js. Dit zijn allebei jQuery-plugins, elk met een eigen taak: knob.js zorgt ervoor dat er voor elk van die vier cirkels een <canvas>-element wordt gemaakt om de cirkel met de animatie weer te geven, terwijl throttle.js zorgt dat het systeem niet vertraagt door een zeker deel van de opdrachten tot het bijwerken van de klok tegen te houden.
- Natuurlijk is er het Classy Countdown script zelf. De klok gaat lopen zodra de benodigde informatie geladen is.
- Een $(document).ready()-function is niet nodig. Wel moet je een function aanroepen om op te geven op welk tijdstip de klok op nul komt.
- Benodigde CSS staat in de file jquery.classycountdown.css.
- Waar mogelijk gebruik je het beste geminificeerde versies van de code, herkenbaar aan .min. in de filenaam. Die laden wat sneller.
- Met die functie kun je ook het uiterlijk van de klok instellen via een theme, dat is een standaard-opmaak. Het
Classy Countdown script heeft er twaalf aan boord, waar je naderhand via CSS nog wat kunt aanpassen.
De opmaak van de getallen in de cirkels lijkt te zijn gekoppeld aan de opmaak van de <body>. Je kunt dat niet zomaar veranderen. - Als de klok nul bereikt stopt hij. Je kunt een speciale function aanroepen om een vervolgactie te starten.
- Inbouwen in je eigen site
- De code van het voorbeeld staat onderaan de pagina. Die kun je downloaden om op voort te bouwen. Voor de benodigde bronbestanden verwijs ik naar jQueryscript.net. De download op die site bevat ook een file doc.html, die veel nuttige info bevat om de opmaak van de klok naar je eigen hand te zetten.
- De klok loopt tot now() + 1000000. Dat is 1 000 000 seconde (niet: milliseconde) na nu (dat is: volgens de systeemklok). Deze 1 000 000 sec. is gelijk aan 11 dagen, 13 uren, 46 minuten en 39 seconden
- Van de beschikbare themes is er zeker wel een die in jou website past. Vergaand aanpassen van het uiterlijk van de klok is hogeschool-programmeerwerk.
- Voor deze pagina is de klok in een eigen container gezet, die de klok centreert op de bladzijde. De opmaak van het witte vlak en de grootte ervan zijn ingesteld met een style-attribuut in de <div> met de klasse countdown.
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="jquery.classycountdown.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="jquery.knob.js"></script>
<script src="jquery.throttle.js"></script>
<script src="jquery.classycountdown.min.js"></script>
(Zet dit in de <BODY>, op de plaats waar de klok moeten staan).
<div align="center">
<div class="countdown" style="background-color:#fafafa;
border:1px solid navy; width:70%;"></div>
</div>
(Zet dit helemaal aan het eind van de <BODY>).
<script>
$('.countdown').ClassyCountdown({
theme: "flat-colors-very-wide",
end: $.now() + 1000000,
labelsOptions: {
lang: {
days: 'Dagen',
hours: 'Uur',
minutes: 'Min.',
seconds: 'Sec.'
},
style: 'font-size:0.5em; font-weight:bold; color:maroon',
}}
);
</script>
Downloaden:
Druk op de knop:
File: voorb439.zip, 753 bytes.
