"Scroll-Jacking" in Full Screen.

JavaScript

var delta;
var currentSlideIndex = 0;

function elementScroll (e) {

	// --- Scrolling up ---
	if (e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0) {	

		delta--;

		if ( Math.abs(delta) >= scrollThreshold) {
		prevSlide();
		}
	}

	// --- Scrolling down ---
	else {

		delta++;

		if (delta >= scrollThreshold) {
			nextSlide();
		}
	}

	// Prevent page from scrolling
	return false;
}


function showSlide() {

	// reset
	delta = 0;

	slides.each(function(i, slide) {
		$(slide).toggleClass('active', (i >= currentSlideIndex));
	});

}


function prevSlide() {

	currentSlideIndex--;

	if (currentSlideIndex < 0) {
		currentSlideIndex = 0;
	}

	showSlide();
}

function nextSlide() {

	currentSlideIndex++;

	if (currentSlideIndex > numSlides) { 
		currentSlideIndex = numSlides;
	}

	showSlide();
}

$(window).on({
	'DOMMouseScroll mousewheel': elementScroll
});

Hmm, I get a uncaught reference error $ not defined

$(window).on({
'DOMMouseScroll mousewheel': elementScroll
});

are you sure jQuery is connected to your document? check it on dev tools console

I get Uncaught ReferenceError: scrollThreshold is not defined

@vjandrei same here, I tried defining it with a number but it doesn't seem to work. The code on their live site doesn't contain a reference to scrollThreshold anyway in the js... I'm stuck

Hi, I'm hoping there could be another update to your original post here: http://www.hugeinc.com/ideas/perspective/scroll-jacking-on-hugeinc The code posted has several elements missing, I haven't seen anyone replicate even a basic example of this yet. Trying to myself at the moment.

I was getting error "scrollThreshold is not defined ".
Found this fix on Stack Overflow: http://stackoverflow.com/questions/22099957/scroll-jacking-in-full-screen-javascript-defining-scrollthreshold
And "working" sample is on Codepen: http://codepen.io/anon/pen/KJupc/

There are so many things missing from the code posted I assumed the author was trolling us, like, "haha figure it out yourselves dummies."

scrollThreshold is indeed missing and hence undefined. The author also doesn't explicitly state the relationship between the desktop and mobile code. Finally, perhaps the most obscene omission, he never defines slides or numSlides.

I've also found in toying around with the code supplied that the immediate functionality (once the above mentioned missing variables are defined and assigned) the behavior of the code isn't as discrete as what one finds up on the website. Instead I find a transform on height being applied that seldom finishes all the way, and when it does it usually trigger the transform on the subsequent slide. This might have to do with the fact that windowHeight was also left out and the way that I defined it.

Lastly I don't find the no-animation class to have any effect given either the supplied CSS or the script above. Would really like to know if the original author has anything they can offer the community given these omissions since they went to the trouble of posting the code in the first place.

It looks like there is a jQuery plugin inspired by this effect: https://github.com/alvarotrigo/pagePiling.js

And a tutorial: https://onextrapixel.com/how-to-create-a-beautiful-fullscreen-single-scrolling-page-like-huge-inc/