Al enige jaren zijn er verschillende javascript bibliotheken die het eenvoudig maken om allerlei effecten aan je website toe te voegen. Een van de meest bekende en meest gebruikte libraries is jQuery. De slide effecten zie je heel vaak. Om de effecten nog mooier te krijgen kun je een easing aan het effect toevoegen. De beweging wordt dan voorzien van een natuurlijker tijdsverloop.
Een voorbeeld met de standaard “swing” jQuery easing:
Met de easing library voor jQuery zijn er veel meer mogelijkheden, bijvoorbeeld de Outbounce
of de InOutQuad
Deze effecten zijn simpel toe te voegen aan je website. Als eerste moet je natuurlijk de jQuery library meenemen. Dat gaat het gemakkelijkst door de ter beschikking gestelde versie van google te gebruiken. Neem vervolgens ook de easing library mee. Het beste is om deze wel op je eigen server te zetten. Ik ga er even van uit dat je de javascript bestanden op de directory /js van je website zet.
Toevoegen van javascript gaat het best in de header van je website:
<head> .. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> <script type="text/javascript" src="/js/jquery.easing.1.3.js"> .. </head>
Vervolgens zet je deze code bij een object (hier een div) dat je wilt laten sliden met easing:
<div id="voorbeeld" style="height:100px;display:none">
Dit object gaan we sliden
</div>
<button onclick="sliden();">Clickme</button>
<script type="text/javascript">
function sliden() {
$('#voorbeeld').slideDown( {
duration: 2000,
easing: 'easeInOutQuart'
});
}
</script>
That’s it!
