How to create: Parallax scrolling

Learn how to create a 'parallax' scrolling effect using CSS.

Parallax scrolling

Parallax scrolling is a web design trend where the background content (such as images) moves at a different speed than the foreground content when scrolling. Click on the following link to see the difference between websites with and without parallax scrolling.

Demonstratie met parallaxe-rol

Demonstratie zonder parallaxe-rol

Let op:De parallaxe-rol is niet altijd op mobiele apparaten/smartphones effectief. Maar je kunt de media query gebruiken om dit effect op mobiele apparaten uit te schakelen (zie het laatste voorbeeld op deze pagina).

Hoe een parallaxe-rol te maken

Gebruik een container-element en voeg een afbeelding met een specifieke hoogte aan deze container toe. Gebruik vervolgens background-attachment: fixed maakt het werkelijke effect van de parallaxe-rol. Andere achtergrond-eigenschappen worden gebruikt om de afbeelding te centreren en perfect te schalen:

voorbeeld in pixels

<style>
.parallax {
  /* Gebruikte afbeelding */
  background-image: url("img_parallax.jpg");
  /* Stel een specifieke hoogte in */
  min-height: 500px;
  /* Maak het effect van de parallaxe-rol */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
/* Container element */
<div class="parallax"></div>

probeer het zelf

De bovenstaande voorbeeld gebruikt pixels om de hoogte van de afbeelding in te stellen. Als je de hoogte in procenten wilt gebruiken, zoals 100%, om de afbeelding aan het hele scherm aan te passen, moet je de hoogte van de parallaxe-container instellen op 100%. Let op: je moet ook height: 100% toepassen op <html> en <body>:

voorbeeld in procenten

body, html {
  height: 100%;
}
.parallax {
  /* Gebruikte afbeelding */
  background-image: url("img_parallax.jpg");
  /* Volledige hoogte */
  height: 100%;
  /* Maak het effect van de parallaxe-rol */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

probeer het zelf

sommige mobiele apparaten gebruiken background-attachment: fixed kan problemen veroorzaken. Maar je kunt de media query gebruiken om het effect van de parallaxe op mobiele apparaten uit te schakelen:

voorbeeld

/* Schakel de parallaxe-rol uit voor alle tablets en smartphones. Als nodig, kan het aantal pixels worden toegevoegd of verminderd */
@media only screen and (max-device-width: 1366px) {
  .parallax {
    background-attachment: scroll;
  }
}

probeer het zelf

In de bovenstaande code wordt de effecten van de parallaxe-rol uitgeschakeld wanneer de schermbreedte kleiner of gelijk is aan 1366 pixels, wat geschikt is voor de meeste tablets en smartphones. Dit wordt bereikt door .parallax van de klasse background-attachment eigenschappen van gefixeerd to scroll To implement. In this way, the background image will scroll with the rest of the page, rather than being fixed in the viewport.