Terug

Voor ieder een plugin

Nu ik de meeste websites heb bekeken, stel ik vast dat ik steeds opnieuw dezelfde vragen voor interactiviteit te horen krijg. Uiteraard moet je niet zelf alles in javascript gaan coderen. Op het internet vind je massa's "plugins" (insteekmodules) voor jQuery waar je net dat effect mee gedaan krijgt, wat je wil bereiken.

Omdat ik steeds dezelfde vragen kreeg, heb ik besloten een aantal plugins te programmeren. Hieronder een top drie.

1. Scrollplugin

Je ziet het wel meer op andere websites. De navigatiebalk krijgt een ander uitzicht als je naar beneden "scrollt" op de pagina. Meestal gebruiken webmasters hiervoor de "scrollspy"-plugin van Bootstrap. Maar het kan korter, eenvoudiger en vooral met meer functionaliteit. Daarom de SchoolvoorbeeldScroll-plugin.

Bekijk een werkend voorbeeld: https://www.schoolvoorbeeld.be/websites/plugins/scroll.php

1. Integreer jQuery in je webpagina

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

2. Integreer de plugin.

Plak deze link onder die van jQuery, allebei in de <head>-sectie van de pagina waarin je het effect wil bereiken.

<script src="https://www.schoolvoorbeeld.be/js/jslibnew.js?v7"></script>

3. Het script starten

Het hangt er natuurlijk van af wat je wil bereiken. We geven hier 2 voorbeelden.

Scenario 1:

Je wil een bepaald element een andere achtergrondkleur geven als het tijdens het scrollen de bovenkant van de pagina bereikt.

<nav>...</nav>  
<div class="row">....</div>  
<div class="row" id="verander"> </div>

In mijn CSS-bestand heb ik de volgende regels ingesteld voor het element met id "verander":

#verander{
      height:30vh;
      background-color:black;
}

Ik wil dit element een andere achtergrondkleur én hoogte geven als het tijdens het scrollen de bovenkant van de pagina raakt.

Hiervoor voeg ik het volgende script toe net boven </body> in mijn webpagina.

<script>
$(document).ready(function(){
    $("#verander").ikbenboven({
        style: "height:50vh;background-color:yellow"
    });
});
</script>

Cool... dat werkt. Test het maar eens uit. Maar volg wel nauwkeurig alle stapjes.

Scenario 2:

Als het element met id "verander" de bovenkant van de pagina bereikt, wil ik de navigatiebalk een andere achtergrondkleur geven. Stel dat de navigatiebalk (<nav>) een zwarte achtergrondkleur heeft, dan wil ik die geel maken.

<script>
$(document).ready(function(){
    $("#verander").ikbenboven({                 
        element: $("nav"),
        style: "background-color:yellow"
    });
});
</script>

Wie wil meer?

De plugin heeft nog meer mogelijkheden. Oneindig veel mogelijkheden zelfs. Maar het is voor wie nog wat verder wil gaan... Ik hoor het wel. Alvast één tipje. Je kan op het moment dat de "scroll"-positie wordt bereikt om het even welke andere javascript-opdracht uitvoeren. Een voorbeeld:

<script>
$(document).ready(function(){
    $("#verander").ikbenboven({                  
        element: $("nav"),
        style: "background-color:yellow",                  
        command: function(){                           
           //voer hier om het even welke javascript-opdracht uit.                  
        }
    });
});
</script>

Praktisch voorbeeld

Stel dat je een geanimeerde skillbar op je website plaatst. Dan zal die animatie uitgevoerd worden bij het laden van de pagina. Als je skillbar onderaan de webpagina staat, zal geen enkele bezoeker merken dat de skillbar geanimeerd is. Met de "scrollplugin" kan je dit probleem oplossen.

Stel dat het HTML-element waarin je skillbar zit, de class "skillbar" draagt. Dan kan je het effect op de volgende manier bekomen.

<script>
$(function(){
    $(".skillbar").ikbenboven({
        command: function() {
            $(".skillbar-bar").css("width", "1%");
            $('.skillbar').each(function() {
                $(this).find('.skillbar-bar').animate({
                   width: $(this).attr('data-percent')
                }, 2000);
            });
        }
   });
});
</script>