Banner die van rechts 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 rechts naar links het beeld in schuift. Er staan twee links op die pagina. Als je daar op klikt krijg je andere banners te zien.

Toon het voorbeeld

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.

Gebruik:

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: Download deze code  File: voorb582.zip, 1282 bytes.

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

 
terug

html-582; Laatste wijziging: 30 mei 2020