Rollover effect met twee links

Hieronder zie je tekst die een beetje raar is. Als je er met de muis overheen gaat beweegt er wat en blijkt het een link te zijn, of eigenlijk twee (de cursor wordt een handje). Afhankelijk van waar je op de tekst klikt wordt een van de links gevolgd.
Het effect werkt niet op een aanraakscherm, een muis is echt nodig! De links doen het wel.

Op deze pagina wordt beschreven hoe je zoiets maakt. De code kun je downloaden om zelf te gebruiken.

Deze techniek kwam ik tegen in Webdesigner Magazine, nr. 85 (april 16), pag. 16-18.
Dit blad wordt niet meer gemaakt.
Voor deze website heb ik een paar wijzigingen aangebracht in het originele script.

• Er worden twee items besproken:
  1. De werking van het script, in algemene termen.
  2. Toepassen in je eigen site.
   
• De werking van het script
• Dit is een jQuery-toepassing. Het originele voorbeeld gebruikte jQuery 2.1.4. Op deze site wordt versie 1.11.3 gebruikt. Dat is nodig om te zorgen dat het ook werkt met Edge en Internet Explorer.
   
• De beweging van de schuine streep verloopt volgens een Bezier-kromme, om precies te zijn met de punten [.17, .67, .21, 1].
• Omdat Bezier-krommen alleen in CSS zijn gedefinieerd, is een conversie naar JavaScript noodzakelijk. Dit wordt geregeld door de jQuery-plugin Bez 1.0.11, die je kunt downloaden van github.com/rdallasgray/bez, maar je vindt hem ook in de download: file jquery.bez.js. Voor gebruik in dit script hoef je die niet aan te passen.
• Meer informatie over Bezier-krommen vind je in het item Bezier-krommen gebruiken in CSS-animaties.
   
• De HTML bestaat uit een <div>-tag met id="slide-link". Daarbinnen staan twee <a>-tags met daarin de links.
• Het eigenlijke werk wordt gedaan door de code in file slide-link.js. Die file moet je in de meeste gevallen aanpassen voor je eigen gebruik.
• Als eerste wordt de Bezier-kromme ingesteld, waarmee de beweging wordt gestuurd.
• Daarna worden de twee <a>-tags vervangen door een <svg>tag. Deze bevat twee polygonen, die de tekst van de links bevatten. Er is ook een path, deze bevat de schuine streep.
• De drie items liggen boven elkaar; de linker link (Foto's) ligt onder, de rechter link (Fractals) in het midden en de schuine streep bovenop.
• Het deel rechts van de schuine streep van de onderste link, (Foto's) is transparant. Het deel links van de schuine streep van de middelste link, (Fractals) is transparant. Als de muis boven een van de twee links komt, verschuift de streep. Zo wordt de ene link helemaal zichtbaar, en wordt de andere link helemaal onzichtbaar
• Als laatste wordt een click event toegevoegd aan de beide links, zodat die kunnen werken. Afhankelijk van waar de muis zich boven de twee links bevindt wordt één van de twee href-attributen gebruikt.
   
• Als je met deze methode een pagina met frames oproept van uit een pagina met frames, zoals hier kan gebeuren, en als die pagina ook nog uit een bestaande frameset breekt, kun je met de terug-knop van de browser hier niet meer terugkeren. Dit zij-effect kun je goed onderzoeken met behulp van de link "Foto's" op deze site. In de dagelijkse praktijk zul je dit maar heel zelden aantreffen.
   
• Toepassen in je eigen site
• Download de zip-file en pak hem uit. Bouw de code op zoals hier onder is aangegeven.
• Pas de links en de link-teksten aan. Dat is alles.
   
• Als je de kleur van de schuine lijn wilt veranderen, vervang je de hexadecimale code voor de kleur in het "fill"-attribuut in de <path>-tag binnen de<svg>tag, in de file slide-link.js.
• Als je het bewegingsprofiel van de schuine lijn wilt aanpassen (dus een andere Bezier-kromme gebruiken), kun je de coördinaten daarvan aanpassen in regel 2 van slide-link.js.
• Het veranderen van de lettergrootte van de twee links doe je door waarden van font-size en line-height in de file slide-link.css aan te passen. font-size mag niet groter zijn dat line-height. Pas in de file slide-link.js de waarde van HEIGHT aan, deze moet gelijk zijn aan font-size + line-height.
• De lengte van de schuine streep pas je aan door in <path>-tag de waarden van een paar getallen in het attribuut d te veranderen. Het betreft: -8.8046 (3×), 55.4212(2×) .5788(1×). Vermenigvuldig deze met dezelfde factor, laat de tekens onveranderd. Deze zaken staan in de file slide-link.js.
• De horizontale verschuiving van de schuine lijn bij een mouse-over, regel je met de variabele t binnen de function animateTo(destination), in de file slide-link.js. Op deze pagina worden de waarden -1.35 en 1.0 gebruikt. Door een beetje met deze getallen te spelen kun je de waarden vinden waarbij de schuine lijn even veel naar links als naar rechts verschuift. Laat de 0 (nul) in de betreffende regel code ongewijzigd!

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="slide-link.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.bez.js"></script>

(Zet dit in de <BODY> op de plaats waar de dubbele link moet verschijnen).

<div id="slide-link">
  <a href="https://www.webmasterij.nl/fotoalbum">Foto's</a>
  <a href="https://www.webmasterij.nl/fractals ">Fractals</a>
</div>
<script src="slide-link.js"></script>

Downloaden:
 
Druk op de knop:  File: voorb516.zip, 3205 bytes.