Parallax scrolling

Parallax scrolling is een techniek waarbij de content over de achtergrond heen schuift. Dat laat zich het beste uitleggen aan de hand van een voorbeeld.

Deze techniek is heel geschikt voor een éénpagina site. Dat is een site die uit slechts één pagina bestaat en één onderwerp heeft. Denk bijvoorbeeld aan de aankondiging van een event. De site vertelt wat er gaat gebeuren, waar dat is, en hoe je aan kaarten kunt komen. In het laatste blok kan dan een aanmeldingsformulier staan.

Elders op deze site wordt een aantal varianten besproken. Zie daarvoor deze items:

• Header met achtergrond waar content overheen schuift
• Header met achtergrond waar content overheen schuift II

Op deze pagina wordt een variant besproken waarbij er meerdere achtergronden zijn. Elk blok content heeft zijn eigen achtergrond.

• Er worden twee items besproken:
  1. De werking van het script.
  2. Toepassen in je eigen site.
   
• Dit is een bewerking van een script dat ik aantrof op w3schools.com. Voor deze site heb ik de code een beetje gefatsoeneerd en de opmaak aangepast aan de stijl van deze site.
• De code van het voorbeeld kun je downloaden om zelf te gebruiken of om zelf aan door te ontwikkelen.
   
• De werking van het script
• De code bestaat uit HTML en CSS, in de file styles.css. JavaScript komt er niet aan te pas.
   
• HTML
• De content bestaat steeds uit een achtergrond en een stuk tekst die daar overheen schuift. Dat zijn dus steeds twee blokken HTML die bij elkaar horen.
• Elk eerste blok is een div-tag met een klasse die de achtergrond bevat. In het voorbeeld zijn dat de klassen bgimg-1, bgimg-3 en bgimg-3.
• Binnen deze div-tag ligt een tweede div-tag, met klasse caption. Deze positioneert de titel, die boven de achtergrond zweeft, verticaal in het midden van het zichtbare deel van de achtergrondfoto.
• Binnen de klasse caption bevindt zich een span-tag met klasse border. Deze bevat de titeltekst.
• Elk tweede blok is een div-tag met klasse contentblok. Daar kun je alle HTML in kwijt die in een div mag staan, hoewel ik video en audio hier niet aanraad.
• Omdat het geheel responsive moet zijn, is een meta-tag in de head noodzakelijk:
  <meta name="viewport" content="width=device-width, initial-scale=1">.
   
• CSS
• De CSS van het voorbeeld staat in de file styles.css. Hieronder worden een paar, voor het voorbeeld relevante,
• Als eerste wordt voor html en body (dus voor het hele document) de hoogte ingesteld op 100%. Dit is nodig om het gebruik van percentages voor de hoogte van de afzonderlijke achtergrondfoto's mogelijk te maken.
• De (in het voorbeeld: drie) verschillende achtergrond foto's staan elk in een eigen klasse: bgimg-1, bgimg-2 en bgimg-3. De bestandsnamen en de hoogste staan in aparte blokken. De eigenschappen die ze gemeenschappelijk hebben staan bij elkaar in één blok.
• De achtergronden hebben de eigenschappen background-attachment: fixed, background-position: center, background-repeat: no-repeat; en background-size: cover. Deze vier eigenschappen zijn noodzakelijk om het goed te laten werken.
• De achtergronden hebben ook opacity:1. Het is interessant om die eens wat lager te zetten, bijvoorbeeld 0.65. In sommige gevallen geeft dat een mooi effect. Niet alle foto's zijn daar geschikt voor.
• De titel op elke foto heeft de klasse caption. deze zorgt ervoor dat de titel zowel horizontaal als verticaal gecentreerd staat. De titeltekst zelf staat in de <span>-tag binnen caption en heeft de klasse border. Dit CSS-blok maakt de titel op.
• De broodtekst bij elke achtergrond heeft de klasse contentblok.
• Als de breedte van het beeldscherm kleiner is dan 1024 px, zoals bij veel mobiele telefoons, wordt het parallax effect uitgeschakeld. Dat gaat via deze media-query:
    @media only screen and (max-device-width: 1024px) {
    .bgimg-1, .bgimg-2, .bgimg-3 {
      background-attachment: scroll;
    }
  }
• De media query bevat het keyword only, dat door oudere browsers niet wordt herkend en dus wordt genegeerd. Oude browsers zullen het parallax-effect op een smal beeldscherm dus niet uitschakelen. Omdat de CSS eigenschappen bevat die door oude browsers niet worden herkend, zal het effect daar dus sowieso niet werkenhellip;
   
• Toepassen in je eigen site
• Regel een aantal foto's van een behoorlijk formaat. Voor het voorbeeld heb je er drie nodig.
• Download de .zip-file en pak hem uit. Hernoem de file html677a.htm naar index.html. Je hebt nu een werkend voorbeeld.
• Zet, in de file styles.css, de bestandsnamen van je eigen foto's (zonodig met pad) in de url binnnen de klassen bgimg-1, bgimg-2 en bgimg-3.
• Vervang, in de HTML, de teksten in de captions en de contentblokken door je eigen teksten.
• Wijzig in de CSS de kleuren, de lettergrootte en het lettertype naar je eigen smaak. Merk op dat sommige dingen, waaronder het lettertype, op twee plaatsen worden opgegeven.
   
• Je kunt foto's weghalen en toevoegen. Dat gaat als volgt:
  º  Weghalen: Verwijder de klasse de klasse met de betreffende achtergrond uit de CSS Verwijder de HTML van die klasse alsook het daarop volgende contentblok.
  º  Toevoegen: Voeg een klasse toe met een unieke naam, bijvoorbeeld bgimg-4, aan de CSS. Zet hier de url en de hoogte van de achtergrondfoto in. Pas ook de regel .bgimg-1, .bgimg-2, .bgimg-3 { aan. Doe dat ook bij de media-query.
  Voeg HTML toe die verwijst naar de nieuwe klasse. Voeg ook een contentblok toe aan de HTML.
• Merk op dat er bij de laatste foto in het voorbeeld géén contentblok is. Dat werkt prima als afsluiting van de pagina.

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

<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="styles.css">

(Zet dit in de <BODY>).

<div class="bgimg-1">
  <div class="caption">
    <span class="border">SCROLL OMLAAG<br>OF VEEG OMHOOG
  </span>
  </div>
</div>

<div class="contentblok">
  <h3>Parallax Demo</h3>
  <p>Parallax scrolling is een techniek waarbij de content over de
  achtergrond heen schuift. De titel van elk blok content heeft zijn
  eigen achtergrond.</p>
  <p>Lorem ipsum dolor …</p>
</div>
 
div class="bgimg-2">
  <div class="caption">
    <span class="border">KLEINERE HOOGTE</span>
  </div>
</div>
 
<div class="contentblok">
  <p>In tegenstelling tot de andere foto's is de hoogte in de foto
  hierboven beperkt tot 400px.</p>
</div>
 
<div class="bgimg-3">
  <div class="caption">
    <span class="border">SCROLL OF VEEG<br>OMHOOG
    EN OMLAAG</span>
  </div>
</div>
 
<div class="contentblok">
  <p>De hoogte van de foto is 100% van de beschikbare hoogte
  van het browserwindow.</p>
</div>
 
<div class="bgimg-1">
  <div class="caption">
    <span class="border">Mooi h&eacute;?</span>
  </div>
</div>

Downloaden:
 
Druk op de knop:  File: voorb677.zip, 2069 bytes.