Parallax-effect voor muisbewegingen
In de begintijd van de spelcomputers maakte men gebruik van parallax om diepte te suggereren. Het is hetzelfde effect wat
je hebt als je in de trein zit en je het landschap aan je voorbij ziet trekken: De voorgrond beweegt sneller dan de achtergrond.
In een website kan zoiets ook een mooi effect geven. Het effect wordt geactiveerd door het bewegen met de muis.
Deze techniek is bij uitstek geschikt voor een één-pagina site. Dat is een (meestal) kleine website, die één onderwerp behandelt. Dit soort sites wordt vaak ingezet om kortdurende evenementen te promoten of om iets te presenteren. Soms bevat zo'n site opvallende animaties.
Op deze pagina wordt uit de doeken gedaan hoe je zoiets aanpakt. De code kun je downloaden om zelf te gebruiken, echter zonder de foto.
We beginnen met het voorbeeld, dat opent in een nieuw venster of tabblad. Beweeg de muis en zie hoe de voorgrond en de
achtergrond bewegen met verschillende snelheden.
Dit is een bewerking van een script dat ik aantrof in Webdesigner Magazine nr. 89 (september 2016), pag. 14 e.v. Dit
blad wordt sinds eind november 2017 niet meer gemaakt.
Het oorspronkelijke script is niet meer beschikbaar op internet. De maker van het script is niet bij het betreffende artikel genoemd.
- Er worden twee items besproken:
- De werking van het script, maar niet diepgaand.
- Zelf een site mee bouwen.
- De werking van het script
- De code bestaat uit HTML, CSS (in de file styles.css), en wat JavaScript.
- De HTML-structuur is belangrijk. Deze moet intact blijven om het allemaal goed te laten werken. Wel is het mogelijk om
'klikbare' drijvende gebieden toe te voegen of weg te laten.
- De HTML-code bestaat uit één enkele <main>-tag met id="bg". Deze dient om de achtergrondfoto te laten verschuiven en als container voor de overige inhoud, dus om de boel bij elkaar te houden.
- Daarbinnen is een article-tag, met het attribuut data-map. Deze bevat de achtergrond foto zelf.
Zie het item Over het data-attribuut in HTML5-tags voor meer informatie over data-attributen. - Binnen article vind je een section-tag. Hierin bevinden zich drijvende elementen. In het voorbeeld zijn dat er drie.
- Elk drijvend element bestaat uit een <a>-tag met de attributen id, href en data-marker. De linktekst staat in een <span> met het attribuutdata-content.
- Als je op een drijvend element klikt, gaat die naar zichzelf. Dat komt doordat de id en de href gelijk zijn (behalve #).
- De linktekst is via CSS onzichtbaar gemaakt (opacity:0;) en vervangen door "klik" (content in [data-marker]::before).
- Door op een drijvend element te klikken wordt de echte linktekst zichtbaar doordat de opacity op 1 wordt gezet.
- De hover-effecten zijn geprogrammeerd in CSS. Die worden aan de achtergrond gekoppeld met JavaScript. Als de pagina is geladen wordt een function gedraaid die met addEventListener de muisbewegingen aan de achtergrond en de drijvende elementen koppelt.
- Het Javascript zorgt ervoor dat de achtergrond en de zwevende elementen met verschillende snelheden bewegen, tegen de richting van de muis-pijl in.
- De zwevende elementen worden boven de achtergrond en andere content gehouden met begulp van z-index.
- Het diepte-effect wordt versterkt door het gebruik van een subtiele box-shadow.
- Zelf een site mee bouwen
- Download de .zip-file en pak hem uit. Hernoem de file html532a.htm naar bijvoorbeeld index.html.
- Regel een geschikte foto voor de achtergrond. Zorg voor een prent met grote afmetingen. Een beeldverhouding van 1 : 3 is wel nodig, maar je kunt het natuurlijk ook met 1 : 2 proberen. Een vierkante foto raad ik af.
- Maak de code zoals hier is aangegeven, voeg zelf drijvende items toe, of verwijder er. Let er daarbij op dat de HTML-structuur niet verandert.
- Maak de hoeveelheid content (in de items) niet te groot, anders wordt het al gauw onoverzichtelijk.
- De CSS in styles.css ziet er redelijk ingewikkeld uit, maar het is eenvoudiger dan het lijkt.
- Er wordt gebruik gemaakt van data-attributen voor de communicatie met HTM. Aan de data-attributen wordt geen waarde toegekend, alleen het bestaan ervan is voldoende.
- op een paar plaatsen wordt :before toegepast, o.a. om de tekst "Klik" in de drijvende elementen te zetten. Zie het item Content opmaken met :before en :after voor meer informatie.
- Een toelichting op :target vind je in het item Over CSS :target.
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>
window.addEventListener("load", function(){
document.querySelector("main").addEventListener("mousemove",
function(e){
document.getElementById('bg').style.left = -e.clientX + "px",
document.querySelector("main [data-map] > *").style.left
= -e.clientX+"px";
});
});
</script>
(Zet dit in de <BODY>).
<main id="bg">
<article data-map>
<section>
<a id="itemA" href="#itemA" data-marker>
<span data-content>Jantje zag eens pruimen hangen,<br>
O, als eieren zo groot!</span>
</a>
<a id="itemB" href="#itemB" data-marker>
<span data-content>Hij wou ze gaan plukken,<br>
maar dat mocht niet van z'n Pa.</span>
</a>
<a id="itemC" href="#itemC" data-marker>
<span data-content>Maar omdat Jantje braaf was,<br>
kreeg hij zijn hoed vol pruimen.</span>
</a>
</section>
</article>
</main>
Downloaden:
Druk op de knop:
File: voorb532.zip, 1637 bytes.
