AnimateScroll.js: E lo scroll automatico non è più un problema [jQuery]

Giovanni Canella

07/01/2014

7487

Durante la realizzazione di pagine web un web designer deve sempre dare massimo sfogo alla sua creatività, dando vita a effetti "speciali", contenuti originali e molto altro, grazie alle risorse che ha a sua disposizione. In questo articolo vedremo AnimateScroll.js (scritto da Ram Swaroop), un plugin per jQuery, con il quale possiamo rendere animato lo scroll dei contenuti senza dover usare per forza le ancore HTML.

Su internet ce ne sono molti di questo tipo, ma per questo articolo ho deciso di recensire questo, in quanto è quello che mi ha dato colpito maggiormente, infatti grazie alla vastissima gamma di effetti da poter applicare e per la sua leggerezza non può che essere considerato tale.

DEMO

Download & Prove

Il plugin lo possiamo scaricare dal repository ufficiale su GitHub, originariamente ha un peso di soli 7kB, ma comprimendolo, grazie ai vari tools online (es. http://jscompress.com/) possiamo arrivare anche a 4kB, in modo da ottimizzare il più possibile il caricamento della pagina.

L'unica sua dipendenza è jQuery (attualmente alla versione 2.0.2), reperibile dal sito ufficiale in due diverse varianti:

  • da salvare fisicamente sul nostro server,
  • o dai CDN (Content Deliver Network) messi a disposizione da Google, Microsoft...

Il mio consiglio è quello di scegliere il secondo proposto in ambito produttivo, siccome rende più performante il caricamento della pagina grazie ai potenti server, ma se dovete fare delle prove offline questa scelta perde di utilità e potete benissimo utilizzare la prima.

Una volta preso tutto l'occorrente possiamo integrare il tutto nella nostra pagina HTML!

<html>
<head>
	<meta charset="UTF-8">
	<script src="jquery-2.0.3.min.js"></script>
	<script src="animatescroll.js"></script>
</head>
<body onload="location.hash='#home'">
	<div id="home" class="pagina">
		<img src="http://ginho.it/template/Ginho/img/logo.png" width="300">
		Questa è la HOME
		<hr>
		[PULSANTE]
	</div>

	<div id="articolo" class="pagina">
		<img src="http://ginho.it/template/Ginho/img/logo.png" width="300">
		Questo è un articolo
		<hr>
		[PULSANTE]
	</div>

	<div id="footer" class="pagina">
		<img src="http://ginho.it/template/Ginho/img/logo.png" width="300">
		Questo è il footer
		<hr>
		[PULSANTE]
	</div>
</body>
</html>

Composta sostanzialmente da 3 "sotto pagine":

  1. Home,
  2. Articolo,
  3. Footer.

navigabili tramite i pulsanti che andremo a inserire successivamente. Per vedere l'effetto in modo tangibile ho impostato un po' stile CSS base, giusto per delimitare la grandezza dei contenitori e impostare un carattere diverso da quello di default:

* {
	font-family: Arial;
}

body {
	background-color: #EEE;
}

a {
	text-decoration: none;
	cursor: pointer;
}

h1 {
	width: 300px;
	display: inline-block;
}

.pagina {
	width: 80%;
	margin: 50px auto;
	padding: 30px;
	font-size: 30px;
	height: 800px;
	border-radius: 5px;
}

#home {
	margin-top: 100px;
	background-color: #2e9422;
}

#articolo {
	background-color: #e74c3c;
}

#footer {
	background-color: #fffb82;
}

Inoltre, come potete vedere, ho impostato una classe .pagina, che contiene tutte le proprietà a loro comuni, e un id univoco per cambiarli colore, altrimenti non avrei scritto altro che codice rindondante in tutte e 3 le situazioni.

Ora tocca alla parte principale che andrà a gestire il tutto, ovvero Javascript! La prima cosa da fare è quella di inserire i pulsanti di navigazione al posto del placeholder temporaneo [PULSANTE], assegnando all'evento onclick il codice per l'inizializzazione del plugin per ogni contenitore:

<h1><a onclick="$('#articolo').animatescroll({scrollSpeed:2000,easing:'easeInOutBack'});">Avanti ></a></h1>

passando 2 parametri:

  1. scrollSpeed: Che come possiamo intuire imposta la velocità dell'animazione,
  2. easing: L'effetto da applicare allo scroll.

Ce ne sono una marea a disposizione, ecco una lista:

  • easeInOutBack,
  • easeOutBounce,
  • easeOutElastic,
  • easeInQuad,
  • easeOutQuad,
  • easeInOutQuad,
  • easeInCubic,
  • easeOutCubic,
  • easeInOutCubic,
  • easeInQuart,
  • easeOutQuart,
  • easeInOutQuart,
  • easeInQuint,
  • easeOutQuint,
  • easeInoutQuint,
  • easeInSine,
  • easeOutSine,
  • easeInOutSine,
  • easeOutBack.

Per una dimostrazione esaustiva, in modo da farsi un'idea di quello che più ci aggrada, consiglio di visitare il sito http://easings.net/it, che oltre a mostrarci come si sviluppa l'animazione nell'arco temporale, ci fornisce anche le informazioni su come implementarlo in JS o CSS

Alla fine otterremo un risultato del genere:

<div id="home" class="pagina">
	<img src="http://ginho.it/template/Ginho/img/logo.png" width="300">
	Questa è la HOME
	<hr>
	<h1><a onclick="$('#articolo').animatescroll({scrollSpeed:2000,easing:'easeInOutBack'});">Avanti ></a></h1>
</div>

<div id="articolo" class="pagina">
	<img src="http://ginho.it/template/Ginho/img/logo.png" width="300">
	Questo è un articolo
	<hr>
	<h1><a onclick="$('#home').animatescroll({scrollSpeed:2000,easing:'easeInOutBack'});"> < Indietro</a></h1>
	<h1><a onclick="$('#footer').animatescroll({scrollSpeed:2000,easing:'easeInOutBack'});">Avanti ></a></h1>
</div>

<div id="footer" class="pagina">
	<img src="http://ginho.it/template/Ginho/img/logo.png" width="300">
	Questo è il footer
	<hr>
	<h1><a onclick="$('#articolo').animatescroll({scrollSpeed:2000,easing:'easeInOutBack'});"> < Indietro</a></h1>
</div>

Se non vi piace lo stile del codice, e volete implementare l'evento click nell'head, separandolo di conseguenza dalla struttura HTML, possiamo benissimo fare in questo modo:

$("#avantiArticolo").on("click", function() {
	$("#articolo").animatescroll({
		scrollSpeed: 2000,
		easing: "easeInOutBack"
	});
});

con l'unico, se vogliamo proprio chiamarlo così, svantaggio di assegnare un ID al pulsante.

L'unica nota conclusiva da segnalarvi è l'uso di location.href, all'evento onload nel body, per spostarci automaticamente in #home, dato che con quel particolare effetto "elastico" avrebbe avuto qualche intoppo nella prima pagina.

DEMO

Ti potrebbero interessare

I più letti