Draaiende pagina-overgangen
De techniek die hier wordt besproken 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 spectaculaire animaties, soms zijn ze heel eenvoudig.
Door elk paneel als menu te gebruiken kun je het ook inzetten voor een meer complexe website.
Op deze bladzijde wordt zo'n één-pagina site uitgebreid besproken. De code van het voorbeeld kun je downloaden om zelf te gebruiken, echter zonder de foto's.
We beginnen met het voorbeeld, dat opent in een nieuw venster of tabblad. Navigeer door op de knoppen << en
>> te klikken.
Dit is een vrije bewerking van een script dat ik aantrof in Webdesigner Magazine nr. 90 (oktober 2016), pag. 14 e.v., dat
op zijn beurt weer is ontleend aan de site van Renate Rechner, een
organistatie-psycholoog uit Oostenrijk.
Het blad Webdesigner Magazine 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.
Voor deze website is het voorbeeld verfraaid en is de code wat vereenvoudigd. Een onvolkomenheid is gerepareerd.
- Er worden twee items besproken:
- De werking van het script
- Zelf een site mee bouwen
- De werking van het script
- De code bestaat uit HTML, CSS (in de file styles.css) en JavaScript (jQuery).
- HTML
- De HTML5-structuur is hier van belang:
- Binnen de <body> staat voor elk paneel een <article>-tag met een uniek id: page1, page2, enzovoort.
- Elk article bevat twee <section>-tags, een voor de linker helft en een voor de rechter helft.
- De eerste <section> bevat een kop (<h1>) en wat tekst in een <p>. Daar kun je ook een plaatje bij zetten.
- De tweede <section> bevat een kop (<h2>) en wat tekst in een <div>. Ook daar kan een plaatje bij (niet gebruikt in het voorbeeld).
- Dan zijn er nog de twee navigatie-knoppen. Die zijn gemaakt met <span>-tags.
- Deze code heeft een onhebbelijkheid: Het begint met het tweede paneel. Een oorzaak daarvoor is niet gevonden. Daarom is het script zo gewijzigd, dat er een blanco pagina verschijn bij het starten. Als je op de volgende-knop (>>) klikt verschijnt het tweede paneel (met de foto van de molen). Als je op de terug-knop (<<) klikt verschijnt een paneel met miniaturen van de foto's op de panelen twee t.m. vijf.
- Het blanco voorblad heeft dezelfde structuur als de panelen. Het is dus een <article> met twee <section>s. Het article heeft geen id. Daardoor heeft het ook geen animatie.
- De eerste <section> van het voorblad is leeg. Daarom staat er op het linker deel geen tekst.
- Het voorblad staat als laatste genoemd. Dit is nodig om de andere panelen er onder te laten verdwijnen.
- CSS
- De CSS stelt als eerste in dat de <article>-tags het hele browser-window gebruiken. Daarbij worden o.a. het lettertype en de achtergrondkleur ingesteld.
- Vervolgens wordt voor de <article>-tags ingesteld dat ze zich in de linker bovenhoek bevinden, dat ze geen scrollbars hebben en dat het actieve paneel (article:target) oven de andere panelen ligt (i-index: 50).
- Daarna worden de plaats en de animatie voor de sections binnen een article geregeld. De eerste section (nth-child(1)) heeft een animatie, de tweede (nth-child(2)) is statisch. De animatie wordt actief als het betreffende article zichtbaar gemaakt wordt (met :target).
- Let ook op het verschil in z-index van nth-child(1) en nth-child()2. Het bewegende paneel ligt boven het statische paneel. Dat geeft een bijzonder effect.
- Vervolgens worden de elementen binnen de sections opgemaakt. Door bij article gebruik te maken van box-sizing: border-box wordt voorkomen dat de afmetingen van de panelen veranderen als je binnen- en buiten-marges verandert.
- Dan zijn er nog de knoppen. Beide knoppen zien er hetzelfde uit. Alleen de positionering op het scherm (gerekend van rechts) verschilt.
- Tenslotte is er nog het voorschrift voor de animatie. Die heeft de naam in en wordt geregeld via
@keyframes. De animatie wordt gebruikt door article:target section:nth-child(1).
- JavaScript
- Het JavaScript maakt een object met de naam href. Dat heeft twee velden: data en index.
- Het veld data is een lijst (Array), waarin de id's van de achtereenvolgende panelen worden opgeslagen. index is het volgnummer van het zichtbare paneel.
- Er wordt een tweede object aangemaakt, actions. Dat bevat twee methodes, next en back. Die worden gebruikt om het volgende resp. vorige paneel te laten verschijnen.
- Direct na het laden van de pagina wordt de lijst data gevuld. In het voorbeeld is dat
["#page1", "#page2", "#page3", "#page4", "#page5"]. - Tegelijkertijd worden de twee navigatie-knoppen aanklikbaar gemaakt. Dat gebeurt door de methodes actions.next
en actions.back te koppelen aan de id's #next resp. #back.
- Zelf een site mee bouwen
- Dit is een jQuery-toepassing, dus je hebt JQuery nodig. Die betrek je het beste van een CDN.
Het voorbeeld gebruikt versie 1.9.1, dat werkt prima.
- Download de .zip-file en pak hem uit. Hernoem de file html537a.htm naar bijvoorbeeld index.html.
- Regel een stel geschikte afbeeldingen en bedenk de teksten die je erbij wilt zetten.
- Bouw de code op zoals hierboven is aangegeven.
- Pas de kleuren van de tekst en de achtergrond aan, aan je eigen voorkeuren. Het is mogelijk om elk paneel een andere
achtergrondkleur of om foto's als achtergrond van de panelen te nemen. Maak daarvoor CSS-code aan voor het id van elk
paneel afzonderlijk, bijvoorbeeld:
#page1 section:nth-child(1) { background: red; }of:
#page1 section:nth-child(1) { background: url(foto.jpg); }.
- Tenslotte
- Wees er op bedacht dat deze animatie heel vermoeiend voor de ogen kan zijn, zeker met felle kleuren en hoog contrast.
Gebruik het dus voorzichtig, werk met zachte kleuren en/of pasteltinten en lage (kleur-) contrasten.
Je kunt ook de z-index van section:nth-child(1) kleiner maken dan die van section:nth-child(2). Het draaiende paneel komt dan onder het statische (rechter) paneel vandaan. Dat is al een stuk rustiger om naar te kijken.
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="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
var href = {"data":[], "index":0};
var actions = {};
actions.next = function(){
if(href.index < href.data.length-1)href.index++;
window.location = href.data[ href.index ];
}
actions.back = function(){
if(href.index > 0)href.index--;
window.location = href.data[ href.index ];
}
window.addEventListener("load",function() {
$.each($('article[id]'),function() {
var rect = this.getBoundingClientRect();
href.data.push("#"+$(this).attr("id"));
});
$("#next").on("click",actions.next );
$("#back").on("click",actions.back );
});
</script>
(Structuur van de HTML-code in de <BODY>).
<span id="back"><<</span>
<span id="next">>></span>
<article id="page1">
<section>
<h1>Over dit album</h1>
<div style="float:right">
<img src="foto1.jpg" alt="Molen" width="100">
<img src="foto2.jpg" alt="Paddenstoel" width="100">
<img src="foto3.jpg" alt="Park" width="100">
<img src="foto4.jpg" alt="Roos" width="100">
</div>
<p>Lorem ipsum dolor sit amet, … … id est laborum.</p>
</section>
<section>
<h2>Vier foto's</h2>
<div>Hier leest u wat er over dit album is te zeggen</div>
</section>
</article>
<article id="page2">
<section>
<h1>De molen van Spijkenisse, voor de verhoging</h1>
<p><img src="foto1.jpg"
alt="Molen" style="float:right; margin:0 0 5px 40px">
Lorem ipsum dolor sit amet, … … id est laborum.</p>
</section>
<section>
<h2>Landschap</h2>
<div>Een "landschap" is meer dan strand, bossen
of bergen. Ook in de stad kun je landschappen fotograferen.</div>
</section>
</article>
<article id="page3">
.
.
</article>
<article id="page4">
.
.
</article>
<article>
<section>
</section>
<section>
<h2>Welkom</h2>
<div style="color:#d00">klik op de pijlen om te navigeren</div>
</section>
</article>
Downloaden:
Druk op de knop:
File: voorb537.zip, 2436 bytes.
