Een soepele scroll op je pagina. wel zo soepel!

mouse scroll
Scrollen door je pagina. Je denkt er misschien niet over na, maar het is een essentieel onderdeel van je site!
Soms kom je op een pagina, en valt het gewoon op hoe soepel die site scrollt. Snel, soepel en daardoor dus fijn. Het is onmiskenbaar dat een soepel scrollende pagina een meerwaarde heeft voor de gebruiker.

De reden van dit soepele scrollen meestal dat de ontwikkelaar smoothscroll.js ) een javacript plugin) gebruikt voor de site. Maar hoe zit dit met WordPress?

Natuurlijk kan ook een wordpress site soepel scrollen!

Er zijn twee manieren om ook jouw wordpress site soepel te laten scrollen:

Javascript

Aangezien we een javascript willen toevoegen aan de site is dit misschien wel de meest voor de hand liggende optie.
Het is alleen misschien niet de meest veilige, makkelijke optie. Straks volgt de makkelijke optie.

Je kunt de volgende code toevoegen aan je child theme (gebruik hiervoor wel een child theme, niet in de functions.php van je theme klooien als je ooit nog een update wilt doen)

***********

<?php

add_action( ‘wp_head’, function () { ?>

http://jQuery.scrollSpeed.js

/* write your JavaScript code here */
// The syntax:- $fn useful site.scrollspeed(step, speed, easing)
jQuery.scrollspeed(100,800);

<?php } );

***********

De waarden binnen ‘jQuery.scrollspeed(100.800);’ zijn: 100 is de stapgrootte, en 800 is de scroll snelheid.

 

Gratis plugin

Hey, we gebruiken wordpress vanwege het gemak toch? Voor deze soepele scroll is er natuurlijk ook een plugin beschikbaar!
Mousewheel Smooth Scroll Plugin

Deze plugin kun je gewoon downloaden in de plugin depositry.
Installeer en activeer de plugin, en ga naar de instellingen om alles naar je hand te zetten.

In de algemene instellingen vindt je Step en speed opties.

De stap instelling bepaalt hoeveel pixels de content van je site verplaatst per scroll beweging.
De speed optie bepaalt hoe snel die afstand verplaatst wordt.

Easy peasy.

Mobiel compatible

Smoothscroll.js is volledig mobiel compatible. De soepele scroll zal op al je devices werken.

Snelheid en laadtijden

Smoothscroll.js zal je laadtijden niet tot nauwelijks beinvloeden, zowel niet positief als negatief.
de plugin is super lichtgewicht.

 

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *