cmpolis/scrollIt.js

using your project with mouse scrolling instead of keyboard

Opened this issue · 2 comments

how to use scroll.js in such a way that as the user scrolls down, screen shifts to slide two then three

There you go

if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
document.attachEvent('onmousewheel', wheel);

function wheel(event) {
var delta = 0;
if (event.wheelDelta) delta = event.wheelDelta / 120;
else if (event.detail) delta = -event.detail / 3;

handle(delta);
if (event.preventDefault) event.preventDefault();
event.returnValue = false;
}

function handle(delta) {
var time = 1500;
var easing = 'easeInOutExpo';
var distance = document.getElementById('YourElement').scrollHeight;

$('html, body').stop().animate({
    scrollTop: $(window).scrollTop() - (distance * delta)
}, time, easing );
}

What concerns distance there are two ways to get it:

  1. Manually inserting a value
  2. Automatically get it through css by specifying 'YourElement' (this way you can have fullscreen scroll is well)

may i ask into which function i would insert this code?