Kruisje met link in cirkel
X
In veel apps op je mobiele telefoon en je tablet, meestal in reclames, zie je een kruisje waar een cirkel omheen ontstaat.
Eigenlijk is dat een teller van 0 naar100%. Als de de cirkel vol is en je tikt of klikt er op, gebeurt er iets. In het geval
van een reclame verdwijnt die (meestal). Dat werkt pas als de cirkel vol is. Zie het voorbeeld hiernaast.
Klik HIER om het te zien werken. Als je in de cirkel klikt of tikt nadat die helemaal
vol is, verdwijnt deze.
Het kader staat er omheen voor de duidelijkheid.
Ververs de pagina / het frame om het effect nog een keer te zien.
Op deze pagina wordt uitgelegd hoe je zoiets kunt maken. De code kun je downloaden om zelf te gebruiken.
- Er worden twee items besproken:
- De werking van het script.
- Gebruiken in je eigen site.
- De code bestaat uit HTML, CSS (in de file styles.css) en JavaScript (In de file script.js). Die code kan
natuurlijk ook in het document staan.
- De werking van het script
- Als de pagina is geladen zie je alleen een kruisje. In het voorbeeld staat er een kader omheen, dat is alleen voor de duidelijkheid.
- Na een klik op de link wordt de cirkel getekend. Dat gaat in stapjes van 1/100×360 = 3.6°, elke 0,05 seconde.
- Als de cirkel vol is, wordt die aanklikbaar gemaakt.
- Als er op de cirkel met X wordt geklikt, verdwijnt die.
- HTML
- De HTML bestaat uit twee geneste <div>-tags. De buitenste heeft de klasse container en dient alleen om de cirkel te positioneren in het document.
- De binnenste <div>-tag heeft id="progress-circle". Het is de cirkel zelf.
- Binnen progress-circle is er nog een <span>-tag met id="Xlink". Die bevat het kruisje.
- CSS
- De klasse container positioneert de cirkel in het document, relatief ten opzichte van de plaats waar deze wordt gebruikt. In het voorbeeld is dat aan de rechterkant. Er is een marge van 20px.
- Binnen container is er de id progress-circle. Dit is een vierkant met breedte van 30px. De hoogte is niet opgegeven. In plaats daarvan is aspect-ratio:1 gebruikt. Daardoor, in combinatie met border-radius:50%, ontstaat een cirkel met een diameter van 30px. Door voor aspect-ratio een andere waarde dan 1 te nemen, ontstaat een ellips.
- De achtergrondkleur van progress-circle is niet opgegeven, in plaats daarvan is background:conic-gradient(navy 0, transparent 0) gebruikt. CSS interpreteert dit als background-image. Er wordt een opgevuld cirkel-segment getekend met kleur navy, met een lengte van nul. De rest van de cirkel is doorzichtig (transparent) en loopt van nul tot nul (= 360°).
- Om er een niet-opgevulde cirkel van te maken is met progress-circle de pseudoklasse before nodig. Ook dit
is een cirkel. De eigenschap inset:2px zorgt ervoor dat de afmetingen van de pseudoklasse zowel boven en onder, als
links en rechts, met 2px worden verminderd. Door de achtergrondkleur gelijk te nemen aan die van het document, ontstaat een
niet-opgevulde cirkel.
Het ligt voor de hand om transparent te kiezen als achtergrondkleur van de pseudoklasse. Dat zou betekenen dat je er dwars doorheen kijkt en je de achtergrondkleur van de cirkel (de klasse progress-circle) ziet. Maar dat is niet de bedoeling! Om een niet-opgevulde cirkel te maken moet je de achtergrondkleur van het document gebruiken als achtergrondkleur van de pseudoklasse. - De pseudoklasse moet absoluut zijn gepositioneerd binnen de klasse zelf, zodat de cirkels goed op elkaar liggen (lees: hetzelfde middelpunt hebben).
- De id Xlink maakt de tekst in de cirkel (= het kruisje) op. In de HTML moet die in een <span>-tag zitten,
anders werkt de eigenschap text-align:center niet.
- JavaScript
- Voor de werking van de blauwe cirkel zijn één variabele en één function nodig. Om de demo te laten werken zijn twee extra variabelen en drie extra functions nodig.
- In de variabele stappen wordt bijgehouden welk percentage van de cirkel blauw gekleurd is. De function doeStap() zorgt ervoor dat het blauwe deel van de cirkel wordt aangepast.
- stappen wordt geïnitialiseerd op 0. doeStap() wijzigt de CSS-eigenschap van background binnen
de id progress-circle.
- Door een klik op de link wordt de function toonDemo() gestart. Deze function laat via setInterval() de function stapDemo() elke seconde uitvoeren. Als echter stappen groter is dan nul, stopt de function meteen. Op deze manier wordt ervoor gezorgd dat de demo maar één keer kan worden gestart.
- stapDemo() verhoogt eerst de waarde van stappen met stapje. Als stappen groter wordt dan 100, wordt stappen gelijk gemaakt aan 100. Daarna wordt doeStap() aangeroepen.
- Nadat doeStap() zijn werk heeft gedaan, wordt gekeken of stappen gelijk is aan 100. Als dat zo is, wordt ClearInterval() aangeroepen om de herhaalde aanroep van stapDemo() te stoppen.
- De cirkel wordt aanklikbaar gemaakt met behulp van AddEventListener(). Daarbij wordt ook de cursor veranderd in
een handje om aan te geven dat het een link is. Een klik op die link start de function verbergDemo(). Die laat de cirkel
en het kruisje verdwijnen door display op none te zetten.
- Gebruiken in je eigen site
- Download de zip-file en pak hem uit. Bouw de code op zoals hieronder is aangegeven. Je hebt nu een werkend voorbeeld.
- Pas de diameter (width) en de kleur van de cirkel aan. Maak de achtergrondkleur van de pseudoklasse gelijk aan de achtergrondkleur van het document.
- Pas het JavaScript aan voor je eigen behoefte.
- Tenslotte
- Dit is speciaal bedoeld om de bezoekers van je site even te laten wachten voor ze een actie (kunnen) uitvoeren. Bedenk daarbij dat bijvoorbeeld het sluiten van een pagina altijd mogelijk is.
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="script.js"></script>
(Zet dit in de <BODY> op de plaats waar het de cirkel moet verschijnen)
<div class="container">
<div id="progress-circle">
<span id="Xlink">X</span>
</div>
</div>
Downloaden:
Druk op de knop:
File: voorb741.zip, 1385 bytes.
