Maak een versleepbare navigatieknop

Maak een knop die de gebruiker versleept om naar het volgende menu te komen

Zoals te zien op Mi Banxico

1. Schuifknop

Een pijl die je kunt verslepen zoals op de site van Mi Banxico is complex en kan op diverse manieren worden gedaan. Deze oplossing gebruikt CSS voor de geanimeerde stippellijn en JS voor het sleepeffect. Open start.html en voeg de code aan de body toe.






2. De lijn maken

Voeg nu de CSS toe voor het border-element. Hiermee maak je een gestreepte achtergrond waarmee je de bewegingen van de lijnen kunt animeren. Voor de gradiënt moet je de juiste prefixen voor de diverse browsers gebruiken.

3. De lijn verplaatsen

Met de onderstaande code stel je de animatie-keyframes in zodat de lijn over het scherm blijft bewegen. Hierdoor weet de gebruiker wat hij met de pijl aanmoet. De code in de vorige stap zorgt dat de beweging en daarmee de animatie oneindig doorgaat.

@keyframes border-move {
0% {
background-position: 0px 0px;}
100% {
background-position: 300px 0px;} }

4. Interactie toevoegen

Ga naar de script-tags onderaan het document. Met deze code krijg je de positie van het holder-element. Deze wijzigt afhankelijk van de schermgrootte. Cache de HTML ID-elementen en voeg event-listeners toe.

var offsets = document.
getElementById(‘holder’).
getBoundingClientRect();
var left = offsets.left;
var cover = document.getElementById(‘cover’);
var drag = document.getElementById(‘drag’);
drag.addEventListener(‘mousedown’, mouseDown,
false);
window.addEventListener(‘mouseup’, mouseUp,
false);

5. Omhoog, omlaag

De onderstaande code controleert of met de muis is geklikt. Zo ja, dan gaat de divMove-functie naar muisbewegingen luisteren. Wanneer de muisknop wordt losgelaten, wordt de positie gecontroleerd. Staat deze op de andere cirkel, dan wordt het laden van de pagina getriggerd.

function mouseUp(e) {
window.removeEventListener
(‘mousemove’, divMove,
true);
if (e.clientX – left > 280) {
window.location.href =
‘https://www.google.com’;
} }
function mouseDown(e) {
window.addEventListener(‘mousemove’, divMove,
true); }

6. De muis verplaatsen

Deze code wordt alleen gebruikt wanneer de muis wordt ingedrukt en de bezoeker het object verplaatst. De positie van het element wordt bijgewerkt. Maak een div met de naam cover en maak die breder om de stippellijn te verbergen.

function divMove(e) {
if (e.clientX >= left && e.clientX <= (left
+ 320)) {
drag.style.left = (e.clientX – left) + ‘px’;
cover.style.width = (e.clientX – left) +
‘px’; } }

Deel dit artikel of reageer