jQuery: parallax scrolling with the mousewheel event
HTML
<div id="site">
<div id="section-wrapper">
<div class="section" id="section-1">111</div>
<div class="section" id="section-2">222</div>
<div class="section" id="section-3">333</div>
</div>
</div>
CSS
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;
}
JavaScript
(function($){var types=['DOMMouseScroll','mousewheel'];if($.event.fixHooks){for(var i=types.length;i;){$.event.fixHooks[types[--i]]=$.event.mouseHooks;}}
$.event.special.mousewheel={setup:function(){if(this.addEventListener){for(var i=types.length;i;){this.addEventListener(types[--i],handler,false);}}else{this.onmousewheel=handler;}},teardown:function(){if(this.removeEventListener){for(var i=types.length;i;){this.removeEventListener(types[--i],handler,false);}}else{this.onmousewheel=null;}}};$.fn.extend({mousewheel:function(fn){return fn?this.bind("mousewheel",fn):this.trigger("mousewheel");},unmousewheel:function(fn){return this.unbind("mousewheel",fn);}});function handler(event){var orgEvent=event||window.event,args=[].slice.call(arguments,1),delta=0,returnValue=true,deltaX=0,deltaY=0;event=$.event.fix(orgEvent);event.type="mousewheel";if(orgEvent.wheelDelta){delta=orgEvent.wheelDelta/120;}
if(orgEvent.detail){delta=-orgEvent.detail/3;}
deltaY=delta;if(orgEvent.axis!==undefined&&orgEvent.axis===orgEvent.HORIZONTAL_AXIS){deltaY=0;deltaX=-1*delta;}
if(orgEvent.wheelDeltaY!==undefined){deltaY=orgEvent.wheelDeltaY/120;}
if(orgEvent.wheelDeltaX!==undefined){deltaX=-1*orgEvent.wheelDeltaX/120;}
args.unshift(event,delta,deltaX,deltaY);return($.event.dispatch||$.event.handle).apply(this,args);}})(jQuery);
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)...