Come realizzare un sito completamente scrollabile con jQuery

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!

  1. Interessante e tempestivo.. Mi chiedo se è possibile inserire questa soluzione in una qualsiasi delle pagine di un sito, credo di si..
    L’idea è quella di usare lo scrollabile al posto di un tab.
    Con IE funziona tutto..?

  2. Ciao Alberto, premesso che bisognerebbe sempre firmarsi nei commenti lasciando quantomeno la propria email (sempre che non si abbia qualcosa da nascondere), ad ogni modo lo farò presente all’autore dell’articolo (che non sono io come si vede chiaramente credo). Ad ogni modo se ti soffermi a leggere il codice noterai che è stato cambiato anche se, come suggerivi, più o meno il “succo” è il medesimo. Oltre a questo noterai che la spiegazione al codice e il testo non è “copiato” come dici tu. Ora passo la parola all’autore dell’articolo.

  3. Ciao Alberto scusa se ti rispondo solo ora 🙂 Per quanto riguarda l’articolo non è stato copiato nonostante sia evidentemente simile. Oltre alla spiegazione del codice, evidentemente diversa, puoi notare differenze anche nel codice, seppur minime! Ora non è nel mio interesse dimostrarti che non è stato copiato, tuttavia metterei la mano sul fuoco nel dire che se cercassi un altro pò nel web troveresti molte altre guide simili a queste due dal momento che non vedo molti altri metodi per raggiungere lo scopo dell’articolo in altra maniera. Buona serata 🙂

  4. Non vedo per quale motivo dovrei darti la mia e-mail, comunque Riccardo, hai detto:
    Ad ogni modo se ti soffermi a leggere il codice noterai che è stato cambiato
    quindi è come se mi avessi detto che l’avete solamente modificato, però penso sia stato un tuo errore, forse volevi semplicemente dire che è diverso e non è per niente copiato…

    Per quanto riguarda Carlo, è ovvio che “se assomiglia non è uguale” per cui è inutile dire che la parte concernente la spiegazione è diversa, perché mi sembra ovvio.
    Io parlavo dei codici e, come hai detto tu:
    puoi notare differenze anche nel codice, seppur minime
    Comunque abbiamo risolto e tengo a precisare che non volevo creare nessun tipo di problema, ho solo fatto notare che questo articolo è simile a quello linkato precedentemente da me ed ora le spiegazioni mi sono state date.
    Bye

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Up Next:

Mini Mac Browser PSD per presentazioni

Mini Mac Browser PSD per presentazioni