Banner die van links het beeld inschuift

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.

We beginnen met het voorbeeld. Als je het voorbeeld start, verschijnt er een melding "Welkom op mijn site" Als je daar op klikt (het is een link) krijg je een pagina te zien waarop een banner van links naar rechts het beeld in schuift.

Op deze pagina wordt uitgelegd hoe je dit maakt. De code kun je downloaden om zelf te gebruiken, echter zonder de banners. Daar moet je zelf voor zorgen.

De banners zijn ontleend aan album3 van mijn fotosite. Als je een trage verbinding hebt, merk je dat als een banner voor de eerste keer in beeld komt.
Het zijn .jpg-bestanden, maar je kunt er elke afbeelding voor nemen die je wilt. De enige voorwaarde is dat de browser met het bestandsformaat overweg kan. Met .gif, .jpg, .png en .bmp lukt het zeker.

• 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 (in het document) en CSS (in de file styles.css). JavaScript wordt hier niet gebruikt.
• 
  Het werkt niet lekker met Edge, FireFox en Chrome. Daar begint de animatie halverwege de breedte van het scherm. Dat wordt veroorzaakt door het blad "Welkom op mijn site". Het hoe en waarom daarvan is mij niet duidelijk. Als je het voorblad weglaat gaat het wel goed .
   
• HTML
• De HTML van het voorbeeld bestaat uit drie delen: Het voorblad, de pagina' s met content en de voettekst.
• Het voorblad is een lege pagina met alleen een <h2>-tag met daarin een <a>-tag die de eerste pagina met content oproept.
• Om te zorgen dat het voorblad verdwijnt als de content wordt opgeroepen heeft de <h2>-tag het attribuut onclick="this.style.display='none'".
• De (in het voorbeeld drie) content-pagina's zijn <article>-tags die met z-index:-1 onzichtbaar zijn gemaakt.
• Elk <article> heeft een uniek id. De links in de content refereren aan de id's van de <article>'s. Een <article> wordt zichtbaar door de z-index van -1 in 1 te veranderen.
• Elk <article> bevat een <span>-tag met daarbinnen de afbeelding die als banner optreedt.
• De <span>-tag is met CSS links van het document geplaatst. Als het betreffende <article> zichtbaar wordt gemaakt wordt ook de <span>-tag van links naar rechts geschoven.
• De voettekst zit in een <p>-tag die aan de onderkant van het window is vastgepind. Om conflicten met de z-index van de content-<article>'s te voorkomen is de z-index van de voettekst op 10 gezet.
   
• CSS
• De CSS begint met een beperkte CSS-reset.
• Vervolgens wordt de titel op het beginblad ingesteld. Dat is alleen een h2-tag. De tekst wordt gecentreerd en er wordt een bovenmarge gemaakt.
• De drie achtereenvolgende pagina's met content zitten elk in een article, die allemaal z-index: -1 hebben. Daardoor zitten ze verborgen onder het beginblad. Wel beslaan ze het hele window en zijn ze absoluut in de linkerbovenhoek gepositioneerd. Zodra een article doel (:target) wordt van een hyperlink wordt z-index: 1 gemaakt, zodat het betreffende article zichtbaar wordt.
• De horizontale schuifbalk wordt onzichtbaar gehouden met overflow-x:hidden.
• Het eerste element binnen het eerste child van een article is rechts buiten het scherm gezet left: -100vw. Dat is dus de banner-afbeelding. Zodra het article dat doel (:target) wordt van een hyperlink wordt left: 0 gemaakt, zodat de afbeelding zichtbaar wordt. De beweging wordt gemaakt met een transition.
• De section's binnen een article zijn absoluut gepositioneerd, op 20% van de hoogte van het window, dat is gelijk aan de hoogte van de banner. Een section beslaat de hele breedte van het window.
• De klasse voettekst is voor het opmaken van de voettekst. Deze bevat alleen de link om de pagina te sluiten. De voettekst zit vastgepind aan de onderrand van het window. Om te waarborgen dat deze altijd zichtbaar is, heeft deze z-index: 10.
   
• Toepassen in je eigen site
• Regel geschikte afbeeldingen om als banner te dienen. Een geschikte afbeelding is breder dan breedste beeldscherm. Hier zijn foto's van ca. 2500px. breed gebruikt.
• Download de .zip-file en pak hem uit. Hernoem de file html589a.htm naar index.html of iets dergelijks.
• Zet de bestandsnamen van de foto's in de HTML. Voeg <article>'s toe over verwijder ze. Pas de hyperlinks aan om tussen de bladzijden te kunnen navigeren. Je hebt nu een werkend voorbeeld.
• Pas de CSS aan: kleuren, hoogte van de banner, bovenmarge van de content, enz.
• Verwijder desgewenst het voorblad en/of de voettekst uit de HTML. De selectoren h2 en/of .voettekst kunnen dan weg uit de CSS.
• Zet de content in de <section's.
   

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>).

<h2 style="display:block" onclick="this.style.display='none'">
  <a href="#eerste">Welkom op mijn site</a>
</h2>
 
<article id="eerste">
  <span>
    <img src="banner-1.jpg" alt="beschrijving van banner-1">
  </span>
  <section>
    <h1>Pagina 1</h1>
    &nbsp;<br>
    <a href="#tweede">Ga naar pagina 2 &gt;&gt;</a><br>
    &nbsp;<br>
    <a href="#derde">Ga naar pagina 3 &gt;&gt;</a>
  </section>
</article>
 
<article id="tweede">
  .
  . (code van pagina 2)
  .
</article>
 
<article id="derde">
  .
  . (code van pagina 3)
  .
</article>
 
<p class="voettekst">
  <a href="javascript:window.close()">Sluit deze pagina</a>
</p>

Downloaden:
 
Druk op de knop:  File: voorb589.zip, 1346 bytes.

Opmerking:
 
Er is een equivalent van deze code beschikbaar, waarbij de banner van rechts het beeld in schuift. Zie het item Banner die van rechts het beeld inschuift.