Hoe - Parallax scrollen
Leer hoe u een "parallax"-scrolleffect creëert met CSS.
Parallax
Parallax scrollen is een trend op websites waarbij de achtergrondinhoud (dwz een afbeelding) tijdens het scrollen met een andere snelheid wordt verplaatst dan de voorgrondinhoud. Klik op onderstaande links om het verschil te zien tussen een website met en zonder parallax scrollen.
Let op: Parallax scrollen werkt niet altijd op mobiele apparaten/smartphones. U kunt echter mediaquery's gebruiken om het effect op mobiele apparaten uit te schakelen (zie laatste voorbeeld op deze pagina).
Een parallax-scrolleffect creëren
Gebruik een containerelement en voeg een achtergrondafbeelding toe aan de container met een specifieke hoogte. Gebruik vervolgens de background-attachment: fixedom het daadwerkelijke parallax-effect te creëren. De andere achtergrondeigenschappen worden gebruikt om de afbeelding perfect te centreren en te schalen:
Voorbeeld met pixels
<style>
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Set
a specific height */
min-height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position:
center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<!-- Container element
-->
<div class="parallax"></div>
In het bovenstaande voorbeeld werden pixels gebruikt om de hoogte van de afbeelding in te stellen. Als u procent, bijvoorbeeld 100%, wilt gebruiken om de afbeelding op het hele scherm te laten passen, stelt u de hoogte van de parallaxcontainer in op 100%. Opmerking: je moet ook van toepassing zijn height: 100%op zowel <html> als <body>:
Voorbeeld met procent
body, html {
height: 100%;
}
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Full height */
height: 100%;
/* Create the parallax
scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat:
no-repeat;
background-size: cover;
}
Sommige mobiele apparaten hebben een probleem met background-attachment: fixed. U kunt echter mediaquery's gebruiken om het parallax-effect voor mobiele apparaten uit te schakelen:
Voorbeeld
/* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if
needed */
@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}