DIY : trek aandacht naar content met de jQuery fader

Met het laden van ‘verborgen’ content door middel van een jQuery ‘fade-in’ effect, trek je de aandacht naar deze content. Perfect voor een call-to-action button of titel om je bezoekers aan te sporen tot een bepaalde actie.
Ook wij gebruiken de jQuery fader om de website ‘op te leuken’ en content nog interessanter te maken. Dit delen we dan ook graag met jullie: hoe maak je dit?

 

1. jQuery aan website toevoegen

Om jQuery aan je WordPress website toe te voegen, kun je lokale .js bestanden laden (die je via deze link kunt downloaden > uncompressed, development jQuery 2.1.4). Deze plaats je vervolgens binnen je thema-map (/wp-content/themes/jouw-thema/) in de map ‘js’. Deze code plak je in functions.php, locatie is niet van toepassing, zolang het maar binnen de <?php en };?> staat en geen bestaande code onderbreekt.
/* function and action for wordpress functions.php file */
function myjQueryScript() {
if( !is_admin() ) { /* only display if not in admin area */
wp_deregister_script( ‘jquery’ );
wp_register_script( ‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.js’ );
wp_enqueue_script( ‘jquery’ );
/* jquery.js file in local theme folder */
wp_deregister_script( ‘default’ );
wp_register_script( ‘default’, get_bloginfo(‘stylesheet_directory’).’/js/bestandsnaam.js’ );
wp_enqueue_script( ‘default’ );
}
}
add_action( ‘wp_print_scripts’, ‘myjQueryScript’ );
Uiteraard dien je ‘/js/bestandsnaam.js’ te wijzigen naar de juiste titel. Mocht je de javascript file ergens anders plaatsen, dan moet je ook dit aanpassen.

Als je jQuery aan je non-Wordpress website wilt toevoegen, dan plak je de volgende (dikgedrukte) code tussen de <head> en </head> tags. (Pas wel even de domein aan in je code). Hiervoor gebruiken we trouwens een standaard html code.
<!DOCTYPE html>
<head>
<script type=’text/javascript’ src=’http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.js’></script>
<script type=’text/javascript’ src=’http://blog.energizedesigns.nl/jquery.js’></script>

</head>
<body>
</body>
</html>

2. Vereiste HTML en CSS opmaak

Om nu een aantal div’s te maken die straks met de jQuery fader verschijnen wanneer je door de pagina scrollt, hebben we twee delen nodig: de HTML waarin je de elementen maakt en de CSS waarom je ze stijlt. De volgende code voorziet de pagina van 4 elementen, die je tussen de <body> tags dient te plaatsen.

<div class=”eerste-div”> Dit is de eerste div, zichtbaar na laden</div>
<div class=”tweede-div”> Dit is de tweede div, zichtbaar na 140px</div>
<div class=”derde-div”> Dit is de derde div, zichtbaar na 340px</div>
<div class=”vierde-div”> Dit is de vierde div, zichtbaar na 600px</div>

Nu hebben we de HTML gemaakt en zijn er 4 elementen (div = division/section) die geladen worden. Zoals je kunt zien, wordt de eerste div geladen als de pagina geopent wordt. Hiervoor is een apart jQuery code nodig. Maar voordat we daaraan beginnen stylen we de div’s met CSS, zodat we ze goed kunnen zien waar ze staan en of het werkt.

Wat we willen is een breed vlak met de tekst in het midden. Hiervoor (omdat dit het enige is) gebruiken we een simpele code om alle vier elementen tegelijk te stylen. Deze code plak je onder de <script> die we eerder hebben toegevoegd, maar nog voor de </head>.

Code kort uitgelegd: width: 60%; zo is het vlak niet over de gehele breedte van de pagina. In combinatie met margin: 0 auto; staat dit vlak in het midden. Bij een width: 50%; komen de vlakken naast elkaar te staan (en dat willen we nu niet). De padding: 200px 0; zorgt ervoor dat alles wat in de div gezet wordt, verticaal in het midden komt.
De opacity:0; en filter:alpha zorgen ervoor dat de div’s eerst nog niet zichtbaar zijn (dit wordt door de jQuery gewijzigd).
<style>
.eerste-div, .tweede-div, .derde-div, .vierde-div {
width: 60%;
margin: 0 auto;
padding: 200px 0;
text-align: center;
vertical-align: center;
opacity:0;
filter:alpha(opacity=0);
}
.blue {
background: #0000ff;
}
.red {
background: #ff0000;
}
.yellow {
background: #ffff00;
}
.green {
background: #00ff00;
}
</style>

3. jQuery functies toewijzen

Om nu de effecten die we met jQuery willen bereiken, moeten we de code plaatsen en toewijzen aan de verschillende elementen. Zoals gezegd zijn er twee verschillende codes: 1 om de eerste div te ‘in te faden’ als de pagina wordt geopend en de tweede code om de rest te laten in-faden als je door de pagina scrollt.
/* Laadt div als pagina geopend is */
$(window).load( function () {
$(‘.eerste-div’).fadeIn(‘slow’, function() {
$(this).fadeTo(“slow”, 1);
});
});
Het enige wat in deze code gewijzigd hoeft te worden, wanneer je het ook gebruikt, is de naam van de div. In dit geval is dat in regel 3: $(‘.eerste-div’). Om nu de verschillende div’s te laten infaden wanneer je scrollt heb je de volgende code nodig.
/* Laadt tweede-div na 140px scrollen */
$(window).scroll( function() {
if ( $(window).scrollTop() > 140 ) {
div2(); /* 140px gescrollt vanaf top activeert functie div2() */
}
});
/* de div2() functie */
function div2() {
$(‘.tweede-div’).fadeIn(‘slow’, function() {
$(this).fadeTo(“slow”, 1);
});
}
Omdat we nu alleen nog maar de .eerste-div en .tweede-div hebben gedaan, herhaal je de stappen voor de .derde-div en .vierde-div.

 

En dan kom je er achter dat het niet werkt.

Dit komt omdat elke code een aparte functie aanroept die gekoppeld is aan een HTML element. Als je dus voor de .tweede-div een div2() functie hebt aangemaakt, kun je voor de .derde-div niet opnieuw div2() gebruiken! Elke functie heeft dus een unieke naam nodig. Hoewel er nu div2, div3 en div4 in het eindresultaat staat (onder aan het bericht te bekijken/downloaden), kun je deze functies noemen zoals je wilt, om het voor jezelf overzichtelijk te houden.

De uiteindelijke code zou er ongeveer zo uit moeten zien:
/* Eerste div code, laadt bij openen pagina */
$(window).load( function () {
$(‘.eerste-div’).fadeIn(‘slow’, function() {
$(this).fadeTo(“slow”, 1);
});
});
/* Tweede div code */
$(window).scroll( function() {
if ( $(window).scrollTop() > 140 ) {
div2(); /* de .scrollTop() voert dit commando uit */
}
});
function div2() {
$(‘.tweede-div’).fadeIn(‘slow’, function() {
$(this).fadeTo(“slow”, 1);
});
}
/* Derde div code */
$(window).scroll( function() {
if ( $(window).scrollTop() > 340 ) {
div3(); /* de .scrollTop() voert dit commando uit */
}
});
function div3() {
$(‘.derde-div’).fadeIn(‘slow’, function() {
$(this).fadeTo(“slow”, 1);
});
}
/* Vierde div code */
$(window).scroll( function() {
if ( $(window).scrollTop() > 600 ) {
div4(); /* de .scrollTop() voert dit commando uit */
}
});
function div4() {
$(‘.vierde-div’).fadeIn(‘slow’, function() {
$(this).fadeTo(“slow”, 1);
});
}
Uiteraard missen we <script type=”text/javascript”> aan het begin en </script> aan het einde.

Als je alle stappen goed gevolgd hebt en de codes op de juiste plek en volledig hebt geplaatst, dan is je document / pagina klaar om de div’s te laden wanneer je scrollt.
Werkt het niet? Dan heb je waarschijnlijk toch ergens iets niet goed gedaan. Mocht je er niet uitkomen, stel je vraag of meld je probleem dan in de reacties hier beneden.

Ons originele bestand kun je hier downloaden

 

Vond je deze post leuk? Laat het ons dan weten zodat we betere berichten kunnen plaatsen waar jullie als bezoekers ook echt iets aan hebben!