Menu met scroll-effect

Op deze pagina presenteer ik een menu-effect dat zowel als op een groot scherm als op een mobiele telefoon prima tot zijn recht komt. We beginnen met het voorbeeld:

Als je scrollt (of veegt op een aanraakscherm) verdraaien de menu-items een beetje, en gaan daarna weer terug. De links in het menu doen overigens niets.
De links zijn de namen van wetenschappers die allemaal iets hebben bijgedragen aan de ontwikkeling van Fractals. (Één van die namen hoort niet thuis in die lijst. Het antwoord vind je op mijn Fractalsite.)

Inspiratie voor dit verhaal is gekomen door een artikel in Webdesigner Magazine 95 (mei 2017), pag. 56 en 57.
Dit blad wordt sinds eind november 2017 niet meer gemaakt.
Code wordt in het artikel niet getoond, daarom heb ik het voorbeeld van scratch af opnieuw gebouwd.
De code kun je downloaden om zelf te gebruiken.

• Er worden twee items besproken:
  1. De werking van het script.
  2. Toepassen in je eigen site.
   
• De werking van het script
• De code bestaat uit HTML (in het document), CSS (in de file styles.css) en JavaScript (in de file script.js). Om het menu te gebruiken moet je de HTML en de CSS aanpassen. Het JavaScript kan ongewijzigd blijven.
   
• HTML
• De HTML bestaat uit één enkele <nav>-tag met daarbinnen een unordered list (<ul>).
• De list-items <li> bevatten de hyperlinks <a>. Om aan te geven dat de links in de animatie meedoen hebben ze de klasse link.
• De hyperlinks <a> hebben een leeg href-attribuut. Daarom doen die niets.
   
• CSS
• De CSS begint met een eenvoudige reset voor de elementen html en body. Tevens wordt hier de donkerblauwe achtergrondkleur ingesteld.
• Vervolgens wordt nav opgemaakt: De (witte) rand, de tekst en de marges. De laatsten staan op 0 auto 0 auto. In combinatie met width:50% zorgt dit er voor dat de menu-items netjes is het midden staan.
• De bullets in de ul zijn uitgeschakeld met list-style-type:none. De tekstkleur van de links is heel licht grijs. De onderstreping van de linkteksten is uitgeschakeld.
• De klasse up heeft de animatie wiggleUp. Die duurt 1½ seconde en heeft ease-out. De animatie start dus snel en eindigt langzaam. Omdat er geen instelling is gemaakt voor het herhalingen wordt de beweging 1 × uitgevoerd.
• wiggleUp begint met niet-verdraaide tekst: 0% { transform:rotate(0) }. Halverwege, dat is in het voorbeeld na ¾ seconde, is de verdraaiing 5°, met de klok mee. Na 1½ seconde is de verdaaiing weer nul.
• De klasse dn heeft de animatie wiggleDn. Die werkt precies hetzelfde als wiggleUp, behalve dat de draairichting tegen de klok in is.
   
• JavaScript
• Het JavaScript bestaat uit twee delen: Een event-handler die het scrollen afvangt en een function die de stand van de lijst-items verandert.
• As de pagina is geladen wordt een tweetal variabelen in gesteld: in de Array mItems wordt een lijst met referenties gemaakt naar de HTML-elementen die de klasse link hebben. Hier zijn dat alleen <li> elementen, maar andere HTML-elementen zijn ook mogelijk.
  nItems bevat het aantal elementen in mItems.
• De event-handler voor het scrollen is een bewerking van een script dat ik heb gevonden op codepen.io. Het werkt met twee variabelen: scrollPos en scrollDir.
  scrollPos staat oorspronkelijk op nul. Door te scrollen verandert BoundingClientRect().top;. Als die groter is dan scrollPos krijgt scrollDir de waarde UP, anders krijgt scrollDir de waarde DN. Direct daarna wordt de waarde van BoundingClientRect().top; bewaard in scrollPos en wordt toggleUpDn() aangeroepen.
• toggleUpDn() loopt eerst de nItems elementen van array mItems af en verwijdert daarbij de klassen up en dn. Dat gebeurt met classList.remove()
• Vervolgens wordt gekeken naar de waarde van scrollDir. Als deze UP is, krijgen alle elementen in de array mItems de klasse up, anders krijgen ze de klasse dn. Dat gebeurt met classList.add().
  De CSS zorgt voor de beweging.
   
• Toepassen in je eigen site
• Download de .zip-file en pak hem uit. Hernoem de file html571a.htm naar index.html of iets dergelijks. Je heb nu een werkend voorbeeld.
• Pas de HTML en de CSS aan aan je eigen wensen. Beperk jezelf daarmee tot kleuren, lettertype en -grootte. enz.
• Als je de verdraaingshoeken in de animaties wiggleUp en wiggleDn verandert, hou ze dan wel gelijk aan elkaar (afgezien van het teken). Anders wordt het beeld onrustig.
  De witte rand om het menu heen staat leuk in het voorbeeld, maar is niet nodig. Die kun de desgewenst vrewijderen.
• Laat het JavaScript ongemoeid.
   
• Dit is heel geschikt voor een menu op de eerste pagina van je site, zeker als je veel (ca. 10 of meer) onderwerpen hebt. Er moet natuurlijk wel wat te scrollen zijn!

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="jscript.js"></script>

(Zet dit in de <BODY>).

nav>
  <ul>
    <li class="link"><a href="">Cantor</a></li>
    <li class="link"><a href="">Pythagoras</a></li>
    <li class="link"><a href="">Sierpinski</a></li>
    <li class="link"><a href="">Mandelbrot</a></li>
    <li class="link"><a href="">L&eacute;vy</a></li>
    <li class="link"><a href="">Archimedes</a></li>
    <li class="link"><a href="">Cesàro</a></li>
    <li class="link"><a href="">Peano</a></li>
    <li class="link"><a href="">Gosper</a></li>
    <li class="link"><a href="">Menger</a></li>
    <li class="link"><a href="">Koch</a></li>
    <li class="link"><a href="">Minkowsky</a></li>
  </ul>
</nav>

Downloaden:
 
Druk op de knop:  File: voorb571.zip, 1691 bytes.