Nel web 2.0 lo scroll è diventato un elemento fondamentale di qualsiasi architettura, anche la più semplice. Vediamo come personalizzare questo tipo di animazione e rendere unico il nostro sito con jQuery.
Per personalizzare la scroll-animation del vostro sito potete scegliere diversi metodi. In quello di oggi vi consiglio il plugin AnimateScroll che permette di personalizzare e rendere unico questo delicato aspetto progettuale.
L’uso del plugin è abbastanza elementare, una volta collegate le librerie ci basterà richiamare lo script nel DOM di jQuery e personalizzarne i relativi parametri. Ovviamente il plugin permette di scegliere una corposa lista di opzioni, tra cui il tipo di easing e lo ScrollSpeed.
Ecco il codice completo:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/animatescroll.js">
</head>
<body>
<div id="contenitore1">This is the element where you want to scroll to<div>
<div id="contenitore2">This is the element where you want to scroll to<div>
<script>
$(document).ready(function() {
$('#contenitore1').animatescroll({scrollSpeed:3000});
$('#contenitore2').animatescroll({scrollSpeed:3000,easing:'easeOutElastic'});
}); //DOM
</script>
</body>
</html>
Esempio1: Personalizzazione della velocità di scrolling
$('#contenitore1').animatescroll({scrollSpeed:3000});
Esempio2: Scrolling con easing
$('#contenitore2').animatescroll({scrollSpeed:3000,easing:'easeOutElastic'});
Esempio3: Scrolling di tutta la pagina web
$('body').animatescroll();
[button link=”http://www.targetweb.it/download/2013/animatescroll.js-master.zip” color=”blue” target=”blank” size=”large”]DOWNLOAD[/button] [button link=”http://plugins.compzets.com/animatescroll/” color=”blue” target=”blank” size=”large”]DEMO[/button]
Conosci altri plugin simili per personalizzare l’animazione di scroll? Fammelo sapere nei commenti!
