Meerdere menu-effecten op dezelfde pagina

Gewoonlijk heb je bij een menu één animatie per knop. Vaak is dat bij elke knop hetzelfde of een vergelijkbaar effect, en meestal volstaat dat om het aantrekkelijk te maken. Zelden voegt een tweede effect op een knop iets toe, maar er zijn uitzonderingen mogelijk.

Op deze bladzijde presenteer ik een schermvullend menu waarbij elke knop twee animaties heeft. Dit menu is bij uitstek geschikt als startpagina in een site met meerdere hoofdonderwerpen.
We beginnen met een voorbeeld:

Als je met de muis over een menu-item gaat, verkleurt de tekst van wit via rood naar paars. Tegelijkertijd komt er een afbeelding naar boven schuiven, die tijdens het schuiven wat kleiner wordt. Als de muis-aanwijzer het menu-item verlaat gaat het plaatje weer terug en wordt de tekst weer wit.
De code kunt je downloaden om zelf mee verder te werken, inclusief de plaatjes.

Inspiratie voor dit onderwerp is ontstaan door de website van Jenny Johannesson, zoals die wordt beschreven in Webdesigner Magazine 95 (mei 2017), pag 50. en 51.
Dit blad wordt sinds eind november 2017 niet meer gemaakt.
Voor deze site is het voorbeeld goeddeels herschreven.

• 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 en CSS (in de file styles.css). Er komt geen JavaScript bij kijken.
   
• HTML
• De structuur van de HTML is belangrijk. Die mag niet doorbroken worden, anders werkt het niet meer.
• Het menu is helemaal opgebouwd met <div>-tags.
• Het menu zit binnen een <div>-tag met de klasse wrapper. Deze dient om de boel bij elkaar te houden ien om het menu netjes op het scherm te positioneren.
• Binnen wrapper is er als eerste een <div>-tag met de klasse header-text. Deze maakt een kop die de gebruiker aanmoedigt om een actie te ondernemen.
• Daarna is er voor elk menu-item een <div>-tag met de klasse text-X, waarbij X een volgnummer is. Het eerste item heeft text-1, het tweede item heeft text-2, enzovoort.
• Binnen text-X is een <div>-tag met de klasse clip-text, met daarbinnen alleen een <a>-tag met een menu-tekst.
• Onder elke clip-text staat een <img>-tag met het id=backX. X is hetzelfde volgnummer als bij text-X. Dit zijn de omhoog schuivende plaatjes.
• De plaatjes moeten allemaal even hoog en breed zijn. Zo nodig kun je dit corrigeren in de CSS door top en left op een andere waarde te zetten dan nul.
• De plaatjes zelf zijn in het png-formaat met een transparante achtergrond. De voorgrond is monogchroom, lichtgrijs. De plaatjes worden verschoven, verschaald en zichtbaar gemaakt door de CSS.
   
• CSS
• De CSS staat in de file styles.css. Die moet je aanpassen voor je eigen gebruik. We beperken ons tot een paar hoofdzaken.
• Het kleurenverloop van de tekst is de achtergrond van de klasse clip-text; dit is text-bg.png. Het plaatje is zo groot dat de letters helemaal in het witte stuk passen.
  Om te zorgen dat alleen de witte helft van het plaatje achter de letters te zien is, wordt background-position: top ingesteld. Als de muis er overheen gaat wordt die met background-position: bottom verschoven.
• 
  De tekst is dus transparant. Dat wordt bereikt met webkit-background-clip: text in combinatie met -webkit-text-fill-color: transparent. Dat wordt nog niet door alle browsers volledig ondersteund. Daarom is de vendor-prefix -webkit- (nog) nodig bij Chrome. Het werkt om die reden niet met FireFox.
• In de klasse clip-text vind je ook: transform: translateY(-50%). Dat is bedoeld om de menu-items goed te positioneren ten opzichte van de verschuivende plaatjes.
• Elk van de vier plaatjes heeft een uniek id: backX, waarin X hetzelfde volgnummer is als bij text-X.
• De verplaatsing van 550% die hier gebruikt wordt is zó gekozen dat dit menu het goed werkt op een groot beeldscherm. Voor je eigen toepassing kan dat dus anders zijn. Dat is een kwestie van proberen.
• De verplaatsing van elk plaatje afzonderlijk wordt in gang gezet door met de muis over een element met klasse clip-text te gaan. He goede plaatje word gekozen met de selector clip-text:hover ~ #back1
  Er wordt hier een techniek toegepast die je niet vaak ziet: Er wordt verwezen naar een element die de broer of zus ('sibbling') is van het eerstgenoemde element. Ze hebben de zelfde ouder ('parent'). Voor de code hierboven: De transformatie wordt uitgevoerd op het plaatje met id="back1" als de muis over het element met klasse clip-text gaat, die binnen het element met klasse text-1 ligt. Want die hebben dezelfde ouder!
• Voor elk van de elementen text-X moet position:relative worden opgegeven. Voor text-1 moet top worden ingesteld op 20px, omdat het plaatje menu1.png 20px hoger is dan de andere plaatjes.
   
• Toepassen in je eigen site
• Download de .zip file en pak hem uit. Hernoem html-568a naar index.html of iets dergelijks. Je hebt nu een werkend voorbeeld.
• Het is een kwestie van een beetje spelen met lettertype, lettergrootte en kleuren om tot een goed resultaat te komen. Je kunt in plaats van een egale achtergrond ook een mooie foto als achtergrond gebruiken. Zoorg daarbij wel voor voldoende (kleur-)contrast tussen de foto en de menu-teksten.
   
• Zet op deze menu-pagina zo min mogelijk informatie, anders wordt het al gauw een warboel.

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">

(Zet dit in de <BODY>. Alleen de code van de kop en het eerste menu-item wordt getoond).

<div class="wrapper">
  <div class="header-text">Kies uw apparaat...</div>
  <div class="text-1">
    <div class="clip-text">
      <a href="#">Desktop</a>
    </div>
    <img id="back1" src="menu1.png">
  </div>
.
.
.
</div>

Downloaden:
 
Druk op de knop:  File: voorb568.zip, 11 784 bytes.