Navigatie met scroll-effect
In een paar andere artikelen op deze site wordt uitgelegd hoe je automatisch en snel kunt scrollen met behulp van twee pijlpunten. Zie bijvoorbeeld het item Actieve scroll-buttons III.
Op deze pagina wordt besproken hoe je dit kunt inzetten op een één-pagina-site, om snel content te wisselen.
Dit is een bewerking van een script dat ik aantrof in Webdesigner Magazine nr. 88 (juli 2016), pag. 16 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.
Voor deze site is de vormgeving van het voorbeeld verfraaid.
We beginnen met het voorbeeld, dat opent in een nieuw venster of tabblad. Blader door de pagina's met de twee knoppen in
de rechter bovenhoek.
Als je op de pijl naar beneden klikt, schuift een andere foto in beeld. De eerste foto (van het park) wordt bedekt door
de foto van de meeuw.
Als je weer op de pijl naar beneden klikt, schuift de meeuw omhoog en komt er een foto van een vlinder in beeld. Met de
pijl omhoog ga je terug naar de vorige foto.
- 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 (in de <head>).
- De HTML5-structuur is hier van belang:
- De <body> begint met een <nav>-tag, die de twee pijlpunten bevat.
- Het tweede deel van de <body> is een <article>-tag, die de content bevat.
- <article> is verdeeld in drie <section>-tags, elk met een uniek id dat gebruikt wordt
als referentie voor jQuery (lees: JavaScript).
Met behulp van een style-attribuut zijn de foto's gekoppeld. Ze worden gebruikt als achtergrond. Daardoor kan er tekst op worden getoond. - Elke section bevat een kop (<h1>) en tekst in een <p>.
- De CSS verzorgt de opmaak en de animatie bij het wisselen van de foto's.
- Het JavaScript (jQuery) zorgt voor de interactie. Het vangt de klikken op de navigatie af en zorgt dat het wisselen van
de foto's wordt gestart.
- Zelf een site mee bouwen
- Dit is een jQuery-toepassing, dus je hebt JQuery nodig. Die betrek je het beste van een CDN.
Op deze pagina is versie 1.9.1 gebruikt, dat werkt prima.
- Download de .zip-file en pak hem uit. Hernoem de file html529a.htm naar bijvoorbeeld index.html.
- Maak de code zoals hier is aangegeven, voeg zelf pagina's toe of verwijder ze. Let er daarbij op dat de HTML-structuur niet verandert.
- Kies de foto's. Het mooiste effect krijg je als ze allemaal even groot zijn.
- Maak de hoeveelheid content (in de panelen) niet te groot, anders wordt het al gauw onoverzichtelijk.
- Pas de CSS aan aan je eigen voorkeuren. Beperkt jezelf tot kleuren, lettertypes, enz. De zaken die je kunt veranderen zijn:
- Tijdsduur van de transitions.
- Kleuren van de tekst en de randen
- Lettertype, grootte en gewicht van de letters.
- Marges
- Voor de waarden van z-index geldt:
- waarde van nav is het grootst. In het vorbeeld is het 11.
- waarde van section:target is groter dan nul, maar kleiner dan bij nav. In het voorbeeld: 5.
- waarde van section:first-child wordt opnieuw ingesteld op nul. Dat betekent da de volgorde van opgeven van de blokken section:first-child, section:target en section:first-child niet mag worden gewijzigd.
- Er kan een conflict ontstaan met z-index van 'andere' CSS. De aard van het probleem bepaalt hoe je het oplost: z-index vergroten of verkleinen. Houd daarbij wel bovenstaande regels in het oog.
- Het is mogelijk om meer foto's te gebruiken, je bent niet gebonden aan drie foto's zoals in het voorbeeld. Voeg voor elke
extra foto een section toe aan article. Voeg voor elke extra foto een extra jQuery-function toe. Het gaat hier
om het code-blok:
$("nav a:nth-child(…)").on("click",function(){
if(sectionIndex < sectionList.length-1)sectionIndex++;
window.location = "#"+sectionList[ sectionIndex ];
});
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" media="screen" href="styles.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>
<script>
var sectionIndex = 0;
var sectionList = [];
window.addEventListener("load",function(){
$.each($("section[id]"), function(){
sectionList.push($(this).attr("id"));
});
$("nav a:nth-child(1)").on("click",function(){
if(sectionIndex > 0)sectionIndex--;
window.location = "#"+sectionList[ sectionIndex ];
});
$("nav a:nth-child(2)").on("click",function(){
if(sectionIndex < sectionList.length-1)sectionIndex++;
window.location = "#"+sectionList[ sectionIndex ];
});
});
</script>
(Zet dit in de <BODY>).
<nav>
<a>▲</a>
<a>▼</a>
</nav>
<article>
<section id="Foto1" style="background-image:url('foto1.jpg')">
<h1>Herfst</h1>
<p>Lorem Ipsum tempor conclusionemque? Netus, rebum vis pulvinar
torquent ante adipiscing ex pede saepe. Vulputate instructior
suas persequeris venenatis novum doming! Offendit quidam nec
consul.</p>
</section>
.
(enz.)
.
</article>
Downloaden:
Druk op de knop:
File: voorb529.zip, 1551 bytes.
Opmerking:
Het originele script bevat ook CSS voor het opmaken van de scrollbar naast de foto. Dat is hier niet meegenomen omdat de ondersteuning
door de grote browsers te weinig is.
