Come realizzare un sito completamente scrollabile con jQuery

Vediamo come realizzare un sito completamente scrollabile di notevole impatto grazie all’uso di poche righe di codice JQuery. 

Lo scroll è una funzione messa a disposizione da jQuery che può risultare molto interessante da implementare in siti semplici e non troppo ricchi di contenuti in quanto ci permette di muoverci in sotto-pagine utilizzando l’effetto di easing desiderato.

[lightgrey_box]Avviso: nel nostro archivio è presente anche un’altra possibile variante su come realizzare un sito scrollabile. Se ti va puoi consultare l’articolo QUI. [/lightgrey_box]

[button link=”http://www.targetweb.it/tutorial/2012/scrollable-site-jquery/scrollable.html” color=”blue” target=”blank”]Scopri la Demo[/button]

Vediamo come realizzare una pagina del genere partendo dalla struttura HTML e definendo alcune righe di CSS:

Struttura HTML

<div id="container">
		<div class="sezione" id="sezione1" style="background-color:#2674dd;">
			<ul>
				<li>sezione1</li>
				<li><a href="#sezione2">sezione2</a></li>
				<li><a href="#sezione3">sezione3</a></li>
				<li><a href="#sezione4">sezione4</a></li>
			</ul>
		</div>
		<div class="sezione" id="sezione2" style="background-color:#4d26dd;">
			<ul>
				<li><a href="#sezione1">sezione1</a></li>
				<li>sezione2</li>
				<li><a href="#sezione3">sezione3</a></li>
				<li><a href="#sezione4">sezione4</a></li>
			</ul>
		</div>
		<div class="sezione" id="sezione3" style="background-color:#2696dd;">
			<ul>
				<li><a href="#sezione1">sezione1</a></li>
				<li><a href="#sezione2">sezione2</a></li>
				<li>sezione3</li>
				<li><a href="#sezione4">sezione4</a></li>
			</ul>
		</div>
		<div class="sezione" id="sezione4" style="background-color:#44b8da;">
			<ul>
				<li><a href="#sezione1">sezione1</a></li>
				<li><a href="#sezione2">sezione2</a></li>
				<li><a href="#sezione3">sezione3</a></li>
				<li>sezione4</li>
			</ul>
		</div>
</div>

Stili CSS

html,body
{
	margin: 0;
	padding: 0;
}
.sezione
{
	float:left;
	position:relative;
}
.sezione a
{
	color:black;
	text-decoration: none;
}
.sezione ul
{
	float:left;
	list-style: none;
}
.sezione li
{
	float:left;
	margin-left:20px;
}

E ora passiamo allo script in jQuery: con questo definiamo le dimensioni delle sotto-pagine e gestiamo l’animazione. Se vi state chiedendo perché usiamo jQuery per definire le dimensioni e non il foglio di stile (css) la risposta è semplice: le sotto-pagine devono avere altezza e larghezza pari alle dimensioni della finestra del nostro browser, dimensioni che non possono essere ricavate attraverso il css.

Script jQuery Completo

$(document).ready(function()
	{

	    // definisco dimensioni
   	    var width = $(window).width();
 	    var height = $(window).height();

	    $('#container').width(width*2);
	    $('#container').height(height*2);

	    $('.sezione').width(width);
	    $('.sezione').height(height);

	    var elem; 

	    $('.sezione ul li a').click(function()
	    {
	    	elem = $(this);

	    	$('html, body').stop().animate({
	    	scrollTop: $(elem.attr('href')).offset().top,
            scrollLeft: $(elem.attr('href')).offset().left
		    }, 1000,'easeInOutExpo');
		    event.preventDefault();

	    });  
	});

Il click su una delle voci del menu solleverà l’animazione che sfrutterà le funzioni di scrollTop e scrollLeft per “muovere” il visitatore verso la sezione richiesta. Come si può immaginare la funzione scrollTop() agisce sull’asse Y mentre la funzione scrollLeft sull’asse X, l’unione di queste due funzioni all’interno dell’animazione garantisce lo spostamento diagonale nei casi in cui nasce questa necessità.

Conclusioni e Download

Una soluzione sicuramente di notevole impatto e facile da realizzare, un must have per tutti i web designer e programmatori. Di seguito vi lascio ai link per la demo e il download dello script:

[button link=”http://www.targetweb.it/tutorial/2012/scrollable-site-jquery/scrollable.html” color=”blue” target=”blank”]Scopri la Demo[/button]

[viral-download file1=”http://www.targetweb.it/download/2012/scrollable-site-jquery.zip” name1=”Sito Web scrollabile Jquery” url=”http://www.targetweb.it/come-realizzare-un-sito-completamente-scrollabile-con-jquery” message=”Per scaricare il file devi prima condividere su un social network:” tweet=”Come realizzare un sito completamente scrollabile con #jQuery ” thankyou=”Grazie per aver condiviso! Ecco il link qui sotto:”/]

Se ti è piaciuto l’articolo condividilo sui tuoi social network preferiti oppure commenta per lasciare la tua opinione!