Grazie al plugin jQuery MouseWheel possiamo creare un effetto di scrolling a parallasse con jQuery. Questo plugin fa in modo che l'evento mousewheel funzioni nei vari browser.
La marcatura
Possiamo creare un layout a pieno schermo con la seguente marcatura:
<body>
<div id="site">
<div id="section-wrapper">
<div class="section" id="section-1"></div>
<div class="section" id="section-2"></div>
<div class="section" id="section-3"></div>
</div>
</div>
</body>
Quindi includiamo i nostri script prima della chiusura dell'elemento body:
<script src="jquery.js"></script>
<script src="jquery.mousewheel.js"></script>
<script src="myscript.js"></script>
</body>
</html>
Il codice CSS
Il nostro documento non necessita di scrollbar quindi impostiamo la proprietà overflow su hidden. Ogni sezione verrà posizionata in modo relativo in modo da poter calcolare facilmente il suo offset verticale e spostare il contenitore:
html, body {
overflow: hidden;
}
#site {
width: 100%;
}
#section-wrapper {
position: relative;
width: 100%;
}
div.section {
width: 100%;
position: relative;
}
#section-1 {
background: #ccc;
}
#section-2 {
background: #666;
}
#section-3 {
background: #000;
}
Il codice jQuery
Con jQuery dobbiamo innanzitutto impostare l'altezza di ciascuna sezione sull'altezza globale della finestra del browser. Quindi il contenitore delle sezioni verrà spostato in alto o in basso usando la sua proprietà top. Durante questa azione dobbiamo assegnare una classe alla sezione corrente in modo da poterla selezionare facilmente durante lo scrolling:
var Parallax = {
utils: {
doSlide: function(section) {
var top = section.position().top;
$('#section-wrapper').stop().animate({
top: -top
}, 600, 'linear', function() {
section.addClass('slided').siblings('div.section').removeClass('slided');
});
}
},
fn: {
setHeights: function() {
$('div.section').height($(window).height());
},
onSiteScroll: function() {
var section = null;
$('#section-wrapper').mousewheel(function(event, delta) {
event.preventDefault();
if (delta < 0) { // in basso
section = ($('.slided').length) ? $('.slided') : $('#section-1');
var next = (section.next().length) ? section.next() : $('#section-1');
Parallax.utils.doSlide(next);
}
else if(delta > 0) { // in alto
section = ($('.slided').length) ? $('.slided') : $('#section-1');
var prev = (section.prev().length) ? section.prev() : $('#section-1');
Parallax.utils.doSlide(prev);
}
});
}
},
init: function() {
for (var prop in this.fn) {
if (typeof this.fn[prop] === 'function') {
this.fn[prop]();
}
}
}
};
Parallax.init();