Knop met animatie
Hieronder zie je een knop. Die is gemaakt met CSS. Als er met de muis overheen gaat of het aantikt op een aanraakscherm,
is er een animatie.
Als je op de knop klikt of tikt verschijnt er een alert (in je eigen toepassing maak je daar een link of iets dergelijks van).
Op deze pagina wordt uitgelegd hoe je zoiets maakt. De code kun je downloaden om zelf te gebruiken.
- Er worden twee items besproken:
- De werking van het script.
- Toepassen in je eigen site.
- Inspiratie voor dit item is ontstaan door de website van de drogisterijketen Etos. Voor deze site heb ik het nagebouwd (althans iets wat er veel op lijkt). Op de site van Etos is het niet meer aanwezig.
- Als er geen muis beschikbaar is, zoals bij een mobiele telefoon, wordt het effect zichtbaar als de knop lang wordt vastgehouden.
Als je op de knop tikt wordt deze meteen zwart met witte letters. De oorspronkelijke witte achtergrond met zwarte letters komt pas
terug als je ergens anders op het scherm tikt.
- De werking van het script
- De code van het voorbeeld is gemaakt met HTML, CSS (in de file styles.css) en JavaScript (in de file script.js).
- HTML
- De benodigde HTML voor één knop is een enkele <div>-tag met daarbinnen twee <span>-tags.
- De <div>-tag heeft class="knop" voor de positionering in het document en een deel van de opmaak, en id="knop" voor de communicatie met JavaScript.
- De eerste <span>-tag heeft class="Hover" voor de positionering binnen de <div>-tag en een deel van de opmaak, en id="Hover" voor de communicatie met JavaScript.
- De tweede <span>-tag heeft class="NoHover" voor de positionering binnen de <div>-tag
en een deel van de opmaak, en id="NoHover" voor de communicatie met JavaScript.
- Als de muispijl niet boven de knop zweeft, is de code van NoHover zichtbaar. Dit is de default instelling. De knop is wit en de zijn letters zwart.
- Het Hover-deel bevindt zich links van de knop. Het is niet zichtbaar doordat alleen dingen binnen de randen van de <div>-tag zichtbaar zijn. Dit deel is zwart met witte letters.
- Als de muis boven de knop zweeft, wordt het Hover-deel door CSS en JavaScript naar rechts geschoven. Als de muis de knop verlaat wordt het Hover-deel weer terug geschoven.
- Als er de knop wordt geklikt, wordt via onclick een link aangeroepen. In het voorbeeld is dat een alert
die meldt dat er is geklikt.
- CSS
- De CSS regelt de opmaak, de grootte en de positie van de knop(pen). In je eigen toepassing zul je daar dus het een en
ander gaan veranderen.
Er zijn instellingen voor de klasse knop, de span-tags binnen knop, en de klassen Hover en NoHover. - De klasse knop werkt als wrapper voor de knop. Hij bevat zowel de knop als de muis er niet boven zweeft als de knop
als de muis er wel boven zweeft.
De positie is relative, dus de knop verschijnt op de plaats in het document waar die is gecodeerd in HTML. top en left zijn allebei nul.
De afmetingen zijn 230 × 42 px. De knop is in het voorbeeld in het midden van een regel met margin:0 auto 0 auto.
De overflow is hidden. Alleen de content van knop die binnen de grenzen van knop zijn gepositioneerd zijn zichtbaar. - De opmaak en de uitlijning van de knoptekst, voor zover die niet bepaald worden door de positie van de muis-pijl,liggen vast in .knop span. Hier wordt ook de muis-pijl veranderd in een handje, omdat de knop zich moet gedragen als een hyperlink.
- De opmaak van de "inactieve" knop (dus al de muis er niet boven zweeft) is vastgelegd in de klasse NoHover:
witte achtergrond, zwarte letters en zwarte rand.
De z-index is 1; de knop ligt dus boven het document.
De positionering is absolute, maar dat is binnen de klasse knop, in de linker bovenhoek. De knop is 227 px breed (inclusief de randen), dus de klasse knop zelf is 3px breder dan de werkelijke knop. Dat moet niet meer zijn, omdat muiskliks worden afgevangen op de id knop.
Er is ook een transition opgegeven voor het verplaatsen van de knop. - De opmaak van de "actieve" knop (dus al de muis er boven zweeft) is vastgelegd in de klasse Hover: zwarte
achtergrond, witte letters en witte rand.
De z-index is 2; de actieve knop ligt dus boven de inactieve knop.
De positionering is absolute, maar dat is binnen de klasse knop. De actieve knop bevindt zich 227 px links van de linker bovenhoek van de klasse knop. Doordat knop de eigenschap overflow:hidden heeft, is die niet zichtbaar als de muis niet boven de knop zweeft.
Er is ook een transition opgegeven voor het verplaatsen van de knop.
- JavaScript
- Het JavaScript wordt alleen gedraaid zodra de pagina is geladen. Daartoe is er een event listener gedefinieerd die de tekst in de knop zet en maakt dat de knop reageert op de muis.
- Er wordt gebruik gemaakt van twee variabelen, hover en nohover, waarvan de namen voor zichzelf spreken. Er worden verwijzingen in gezet naar de id's Hover en NoHover.
- Hier wordt ook de tekst in de knop gezet. Geadviseerd wordt de tekst in beide versies van de knop gelijk te houden, om verwarring te voorkomen.
- Er wordt een event listener gemaakt die reageert als de muis boven de knop komt. Zodra dat gebeurt wordt de tekstkleur
van de inactieve knop wit gemaakt. De tekstkleur van de actieve knop wordt ook wit.
Ook wordt de waarde van leftop nul gezet, waardoor de actieve knop zichtbaar wordt. - De CSS-eigenschap transition zorgt ervoor dat een en ander vloeiend verloopt.
- Er wordt ook een event listener gemaakt die kijkt of de muis de knop verlaat. Die doet precies het tegenovergestelde: witte tekst wordt zwart, zwarte tekst wordt wit, de positie van de actieve knop wordt op -227px gezet. Ook hier zorgt CSS voor een vloeiend verloop.
- Tenslotte wordt er een event listener gemaakt die reageert op een muisklik, zodat de knop zich gedraagt als een
link.
- In het JavaScript is gebruik gemaakt van de events mouseenter en mouseleave in plaats van mouseover
en mouseout. Het verschil is dat mouseenter en mouseleave alleen wordt afgevuurd als de muis boven het
element komt of het element verlaat waar naar wordt geluisterd. Eventuele child-elementen worden genegeerd. mouseover
wordt ook afgevuurd als de muis beweegt en als de muis over child-elementen gaat. Ook mouseout reageert op child-elementen.
- Toepassen in je eigen site
- Download de code en pak hem uit. Zet de HTML-code in je eigen document. Je hebt nu een werkend voorbeeld.
- Pas de knoptekst aan voor je eigen toepassing (regel 10 van het JavaScript).
- Pas zonodig CSS-eigenschap width aan in de klasse knop, zodat de tekst er goed in past. Maak width net een paar pixels groter dan strikt noodzakelijk is.
- Pas de waarde van left aan voor de werkelijke breedte van de knop (regel 19 van het JavaScript, regel 25 van de CSS [klasse Hover]).
- Verander de kleuren van de knop naar je eigen smaak. Dat doe je in de CSS-klassen Hover en NoHover en in de het JavaScript, in de regels 14, 15, 20 en 21.
- Pas eventueel de CSS-eigenschap transition aan in de klassen Hover en NoHover. Houd ze wel gelijk aan elkaar, want anders wordt het beeld onrustig.
- Pas de URL aan voor je eigen toepassing (regel 25 van het JavaScript.)
- Als je meer dan één van deze knoppen op je webpagina wilt zetten, hoef je de CSS niet te veranderen. In de HTML moet je zorgen dat alle id's uniek zijn. Dus: knop1, knop2, knop3, Hover1, Hover2, Hover3, NoHover1, NoHover2, NoHover3, enz. In het JavaScript moet je de event listeners op dezelfde manier aanpassen.
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 de knop moet verschijnen).
<div class="knop" id="knop">
<span id="Hover" class="Hover"></span>
<span id="NoHover" class="NoHover"></span>
</div>
Downloaden:
Druk op de knop:
File: voorb619.zip, 1277 bytes.
