Bekijk je instellingen voor parallax scrollen en je tips voor probleemoplossing.

Sjablonen in de Brine-familie gebruiken een speciaal visueel effect op headerafbeeldingen, genaamd parallax scrollen. Bij parallax scrollen beweegt een achtergrondafbeelding langzamer dan de inhoud op de voorgrond, waardoor een illusie van diepte en onderdompeling ontstaat.

Gebruik achtergrondafbeeldingseffecten om een vergelijkbaar parallax scrollen-effect te creëren in versie 7.1.

Hier is een voorbeeld van parallax scrollen in de Burke-template:

Voordat je begint

• Ga naar onze lijst met sjablonen in de Brine-familie om te zien of je sjabloon parallax scrollen ondersteunt.
• Als je parallax-scrollen inschakelt, heeft dat invloed op alle banners op je site.
• Parallax scrollen werkt op mobiele apparaten.
• De stopgezette Marquee-familie ondersteunt ook parallax scrollen. Ga voor meer informatie naar de sjabloongids voor Marquee.
• Zie Audio, afbeeldingen en video's toegankelijker maken voor meer informatie over parallax scrollen en toegankelijkheid. 

Ondersteunde pagina's

Parallax scrollen is beschikbaar op pagina's die banners ondersteunen:

• Indexpagina's (achtergrondafbeeldingen achter gedeelten van de lay-outpagina)
• Lay-outpagina's
• Winkelpagina's
• Evenementenpagina's
• Albumpagina's
• Blogpagina's
• Galeriepagina's

Parallax scrollen in- of uitschakelen

Als de banners op je site het parallax-effect niet laten zien, schakel het in bij de sitestijlen van de Brine-familie:

1. Open het paneel voor sitestijlen.
2. Scroll naar beneden naar het gedeelte Hoofd: overlay.
3. Vink Parallax inschakelen aan.
4. Je kunt ook Parallax smart crop aanvinken om het bijsnijden te minimaliseren.
5. Klik op Opslaan. 

Om parallax scrollen voor je site uit te schakelen, volg je dezelfde stappen maar vink je Parallax inschakelen uit.

Voeg je uitgelichte afbeeldingen toe

Voeg een uitgelichte afbeelding toe aan je pagina of gedeelte om het parallax-effect in te stellen:

• Uitgelichte afbeeldingen die aan een pagina worden toegevoegd, creëren een banner. 
• Uitgelichte afbeeldingen die aan de indexinhoudsgedeelten zijn toegevoegd, creëren een achtergrondafbeelding.

Als het parallaxeffect niet verschijnt, controleer dan of het ingeschakeld is.

Versterk het effect

Je kunt verschillende manieren gebruiken om het effect van het parallax scrollen te versterken.

Inhoud mengen

Meng parallax scrollende afbeeldingen met inhoud en afbeeldingen die niet parallax scrollen. De inhoud die sneller beweegt, lijkt over de parallax-beelden te glijden.

Bijvoorbeeld, in een index kun je contentgedeelten met niet-parallax galerie indexgedeelten, of met inhoudsgedeelten die geen achtergrondafbeeldingen hebben.

Overlay-inhoud toevoegen

Een andere manier om parallax-scrollen te verbeteren is door tekst, knoppen of andere inhoud als overlay aan de afbeelding toe te voegen. Deze inhoud scrolt met dezelfde snelheid als de rest van de pagina, sneller dan de afbeelding. In de familie Brine kun je deze inhoud toevoegen met blokken:

• Banners - Voeg inhoud toe aan het introductiegebied.
• Indexpagina-gedeelten – Voeg inhoud toe aan het contentgebied van de pagina. 

Kleurenfilter toevoegen

Je kunt een kleurfilter toevoegen aan alle banners op je site met Overlay color in het Main: overlay -gedeelte van de sitestijlen.

Bijsnijden

Om te begrijpen hoe bijsnijden het parallaxeffect van afbeeldingen beïnvloedt, is het handig om je site te zien als een stuk papier met een rechthoekig gat erin geknipt. Het parallaxbeeld is een aparte laag eronder die alleen zichtbaar is door het gat in het papier.

Om het papier sneller te laten scrollen dan de afbeelding, moet de afbeelding hoger zijn dan het gat. De extra ruimte bovenaan en onderaan de afbeelding wordt zichtbaar wanneer je het papier op en neer beweegt.

Hierdoor hebben bijsnijden en veranderingen van het focuspunt mogelijk geen merkbare invloed op de positie van een parallax-scrollend beeld. Je site is zo ontworpen dat de afbeelding marges heeft aan de zijkanten, zodat het parallax-effect kan worden weergegeven.

Tip: Controleer Parallax smart crop in de sitestijlen om het bijsnijden aan de linker- en rechterkant te minimaliseren.

Problemen met scrollen

Als er scrollproblemen optreden wanneer parallax is ingeschakeld, kun je mogelijk de grootte van de pagina verkleinen. Browsers kunnen pagina's met parallax scrollen langzaam laden, vooral als de totale paginagrootte 15 MB of meer is. Als scrollen er nog steeds niet goed uitziet, of als het verkleinen van de paginagrootte geen optie voor je is, overweeg dan om parallax uit te schakelen.