Hier wordt uitgelegd, hoe je een simpel parallax scroll effect in je website kan bouwen met behulp van de parrallax.js plugin.

Kijk voor de officiele documentatie op: http://pixelcog.github.io/parallax.js/

Waarvoor wordt het parallax effect in website's gebruikt?

Het kan een idee van diepte geven in je website (Dus minder plat).

Hoe werkt dat?

Diepte heeft te maken met hoe ver een object van je af staat. Wanneer je in de trein zit, vliegen de bomen dicht langs het spoor voorbij, terwijl de objecten die verder van het spoor staan minder snel voorbij "bewegen".

Dit probeert men na te bootsen door in een website de achtergrond mee te laten bewegen met de scrollbeweging, maar dan een stuk langzamer dan de voorgrond.

Wil je weten hoe men de afstand van de sterren tot de aarde berekend doormiddel van het parallax effect? Kijk dan dit filmpje.

1 De plugin aan je website toevoegen

A) Download de plugin hier: http://pixelcog.github.io/parallax.js/

Pak het zip bestand uit en plaats het bestand "parallax.min.js" in de "includes" map van je website map.

B) Link het js bestand in je pagina

Dit doe je in de head van je html in iedergeval na het jquery bestand.

  <html>
    <head>
        <script src="includes/jquery-2.1.1.min.js"></script>
        <script src="includes/bootstrap.min.js"></script>
        <script src="includes/wow.min.js"></script>
        <script src="includes/parallax.min.js"></script>
        <script src="script.js"></script>

In het bovenstaande voorbeeld zie je de paralax plugin (parallax.min.js) op de een na laatste regel toegevoegd.

2 Plaats de parallax achtergronden

Waar je de parallax achtergrond wilt hebben, maak je een div. Deze div moet een class hebben, zodat je er een hoogte aan kan geven en de volgende twee extra attributen: data-parallax en data-image-src.

  <div class="parallax-achtergrond-1" data-parallax="scroll" data-image-src="images/achtergrond1.jpg"></div>

  .parallax-achtergrond-1 {
  height: 400px;
}

Voorbeeld uitwerking

See the Pen Voorbeeld parallax effect met de parallax.js plugin by Nangko (@nangko) on CodePen.

Extra's


504 0 0