Ben's Hobbyhoekje -- Geanimeerd voorblad II: Horizontale scheidingslijn

Geanimeerd voorblad II:
Horizontale scheidingslijn

We beginnen met het voorbeeld. De achtergrond is gedeeltelijk zwart-wit en gedeeltelijk in kleur. Als je de muis beweegt verschuift de horizontale scheidingslijn.

Toon het voorbeeld

Er worden twee items besproken:
1. De werking van het script.
2. Toepassen in eigen site.
De werking van het script

De pagina is opgebouwd uit drie lagen:
• De <body>. Deze bevat de achtergrond met de kleurenfoto.
• De laag met de zwart-wit foto. Deze ligt exact bovenop de achtergrond.
Het is dezelfde foto als de achtergrond, maar is zwart-wit gemaakt met een CSS-filter. Door de CSS-eigenschap height: 50% is alleen de bovenste helft zichtbaar.
• De laag met de tekst. Die zweeft boven de zwart-wit foto.
Met behulp van JavaScript wordt de CSS-height veranderd als de muis beweegt.
Dit is een variant van een vergelijkbaar item, waarvan de scheidingslijn verticaal loopt.
Dit is bij uitstek geschikt als openingspagina voor een site. Je betreedt de site met een enkele muisklik.
De code bestaat uit HTML (in het document), CSS (in de file styles.css) en JavaScript (in de file script.js).
HTML
De HTML bestaat uit twee <div-tags. De eerste heeft id="tekst", de tweede heeft id="slider".
De tag <div id="slider"> bevat de tekst die permanent zichtbaar is, dat zijn de kop (rode letters) en de tekst (witte letters).
De tag <div id="slider"> is leeg.
CSS
De CSS begint met een eenvoudige CSS-reset, waarbij de marges op nul worden gezet en de afmetingen van de body op 100% worden ingesteld. De position is fixed, top en left zijn allebei nul
Vervolgens wordt de kleurenfoto als achtergrond ingesteld. Deze wordt zowel horizontaal als verticaal gecentreerd en bedekt het hele window. Indien nodig wordt de foto geschaald waarbij de lengte-breedte verhouding niet verandert.
Vervolgens worden voor #slider dezelfde instellingen gemaakt als voor de body, maar met één wijziging en drie toevoegingen:
• Het CSS-filter: grayscale() is toegevoegd.
Dat zorgt er voor dat dat de achtergrond zwart-wit wordt weergegeven in plaats van in kleur.

height

slider

body

transition

Dan is er de opmaak voor #tekst. Ook hier zijn de position en de afmetingen gelijk aan die voor body. #tekst bevat verder instellingen voor het lettertype, de karaktergrootte en de -kleur, de uitlijning, enz.
Om te voorkomen dat de #tekst onder #slider verdwijnt is de z-index op 20 gezet.
Tenslotte is er de opmaak voor h1. Alleen de kleur en de lettergrootte zijn ingesteld. Omdat h1 alleen binnen #tekst wordt gebruikt, volstaat dit.
JavaScript
In het script worden eerst vijf globale variabelen gedeclareerd, te weten:
º posY Dit is de verticale positie van de muis-aanwijzer.
º offset Dit is de horizontale afstand van de linker rand tot de muis-pijl,
in verhouding tot de breedte van het browserwindow.
º h Dit is de hoogte van het browserwindow, gemeten in px.
º slider Dit is een verwijzing naar de <div id="slider".
º diff. Dit is een hulp-variabele
posY en offset worden direct op nul gezet. De overige drie variabelen worden ingesteld zodra de pagina is geladen. Daarvoor is een event-handler gemaakt met addEventListener().
Om te reageren op de beweging van de muis is er nog een handler, die ook is gemaakt met addEventListener().
• posY krijgt de waarde van de verticale muispositie, via event.clientY.
Hierin is event een object dat standaard aanwezig is in JavaScript. Het kan dus zonder declaratie worden gebruikt. clientY is de eigenschap van event die de horizontale positie van de muis-aanwijzer bevat.
• offset krijgt de waarde van posY.
Daar wordt nog een bewerking op uitgevoerd.
• diff krijgt de waarde van h.
Deze constructie is noodzakelijk om een type-conversie binnen JavaScript goed te laten werken. Zonder dit werkt het niet.
Tenslotte is er nog een event-handler om een muis-klik op te vangen. Als de muis wordt geklikt komt er een confirm op het scherm die vraagt of het voorbeeld moet worden gesloten. Als er op 'Ja' wordt geklikt sluit het tabblad.
Toepassen in je eigen site
Regel een goede foto. Deze moet (veel) hoger en breder zijn dan de afmetingen van het beeldscherm van je bezoekers. Uit de rapporten van een goede bezoekteller kun je afleiden hoe groot dat zou moeten zijn. Om een idee te geven:
Ik werk meestal met een scherm van 1920 × 1280 pixels. De foto van het voorbeeld is 4882 × 2292 pixels.
Download de zip-file en pak hem uit. Zet de bestandsnaam in background: url{} in de CSS, op twee plaatsen (blokken body en #slider). Hernoem de file html599a.htm naar index.html of iets dergelijks. Je hebt nu een werkend voorbeeld.
Pas het JavaScript aan voor je eigen doeleinden. In het voorbeeld krijg je de vraag of je het voorbeeld wilt sluiten. Voor een productie-site is dat niet handig. Je kunt de event-handler voor 'click' goed gebruiken om de bezoeker naar een pagina binnen je site te sturen (of naar een andere website). Beide dingen doe je met document.location.href. In script.js staat een voorbeeld.
Pas de content aan van het voorblad: Tekst in de HTML, opmaak in het blok #tekst in de CSS.
De eigenschappen position, top, left, width, height, background-attachment, background-size, alsmede de toevoegingen center center aan background: url kun je beter onveranderd laten, anders wordt het gedrag onvoorspelbaar.

De code van het voorbeeld ziet er als volgt uit:

(Zet dit in de <HEAD>).

<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>

(Zet dit in de <BODY>).

<div id="tekst">
<h1>Welkom op mijn site</h1>
<p>Beweeg de muis omhoog en omlaag en zie wat er gebeurt.<br>
Ga ook eens buiten het browserwindow.</p>
<p>Klik ergens om het voorbeeld te sluiten.</p>
</div>
<div id="slider"></div>

Downloaden:

Druk op de knop: File: voorb599.zip, 1471 bytes.

Opmerking:

Van deze code bestaat ook ook variant waarbij de scheiding tussen kleur en zwart-wit verticaal is in plaats van horizontaal.