Bibber-effect bij mouseover
Hier onder zie je een menu. Als je met de muis over een item gaat, gaat die bibberen. Op een aanraakscherm bibbert het
item als je er op tikt.
De links doen overigens niets.
Op deze pagina wordt uitgelegd hoe je zoiets maakt. De code van het voorbeeld kun je downloaden om zelf te gebruiken.
Dit is een bewerking van code die ik aantrof in het blad Webdesigner Magazine nr. 97 (augustus 2017), pagina 14 t.m. 17.
Voor deze site is de opmaak van het voorbeeld verfraaid.
Webdesigner Magazine wordt sinds eind november 2017 niet meer gemaakt.
- Er worden twee items besproken:
- De werking van het script.
- Toepassen in je eigen site.
- De werking van het script
- De code bestaat uit HTML en CSS, beide in het document. JavaScript wordt hier niet gebruikt.
- HTML
- De HTML van het voorbeeld bestaat uit een enkele <nav>-tag met de klasse bibber. Daarbinnen is er voor elke optie een <span>-tag.
- De opties worden gescheiden door vertical bars. Die staan buiten de <span>-tags./li>
- Als je links van de menu-items wilt maken kun je dat doen door de <span>-tags te vervangen door <a>-tags.
Het kan ook met JavaScript, via het attribuut onclick=" … " of met document.addEventListener("
… "){.
- CSS
- De CSS zorgt voor de opmaak van het menu, alsmede voor de animatie bij mouseover. Alles wordt geregeld binnen de klasse bibber.
- Alles binnen bibber wordt gecentreerd in het document gezet.
- De opmaak van de afzonderlijke span-elementen wordt apart geregeld: vetgedrukte tekst, onderstrepen, enz. De horizontale padding (hier: 20px) zorgt voor de afstand tussen de menu-teksten en de verticale strepen.
- Omdat de verticale strepen buiten de <span>-tags staan, zijn ze niet vetgedrukt en niet onderstreept.
- Binnen de klasse bibber wordt alles relatief gepositioneerd. Om te zorgen dat alle browsers het goed renderen is hier ook display:block opgegeven (default is display:inline).
- Als de muis over een menu-optie gaat, wordt de animatie gestart. Die werkt met @keyframes en duurt 0.15 seconde.
- De animatie verschuift de tekst heen en weer, eerst 5px naar links, daarna 10px naar rechts om vervolgens weer naar de
beginstand te gaan. Dat gebeurt elke 0.15 seconde en wordt steeds herhaald. Zo bibbert de tekst.
- Toepassen in je eigen site
- Download de .zip-file en pak hem uit. Bouw de code op in je document zoals hieronder is aangegeven. Je hebt nu een werkend voorbeeld.
- Vervang de content van de <nav>-tag door je eigen teksten. Je kunt daarbij alle HTML-tags gebruiken die je normaal ook in de <body> van je document zet. Je kunt er ook een menu van maken zoals op deze pagina. Dan heb je <a>-tags of JavaScript nodig.
- De CSS-code kun je aanpassen zoals je wilt, maar laat de blokken .bibber > * { … } en .bibber > *:hover { … } intact, anders werkt het effect niet meer. Natuurlijk kun je de duur van de animatie en de @keyframes wel aanpassen aan je eigen behoefte.
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>).
<style>
.bibber {
text-align:center;
}
.bibber span {
display:inline;
padding: 10px 20px;
font-weight: bold;
text-decoration:underline;
cursor:pointer;
}
.bibber > * {
display: block;
position: relative;
}
.bibber > *:hover{
animation: bibber .15s infinite;
}
@keyframes bibber {
0% {left: 0;}
25% {left: -5px;}
75% {left: 5px;}
100% {left: 0;}
}
</style>
(Zet dit in de <BODY> op de plaats waar het effect moet verschijnen).
<nav class="bibber">
|<span>Optie 1</span>|
<span>Optie 2</span>|
<span>Optie 3</span>|
<span>Optie 4</span>|
</nav>
Downloaden:
Druk op de knop:
File: voorb579.zip, 479 bytes.
