Skip to content

Parallax Vanilla JS

Daisho Komiyama edited this page Jan 15, 2018 · 4 revisions

let stopper = false;
let y = 0;
let count = 0;
const _dot = document.getElementById('dot');

window.addEventListener('scroll', function() {
	y = window.scrollY;
	console.log("Y " + y);

	if(y <= 100) {
		window.addEventListener("wheel", MouseWheelHandler, false);
	}
}, false);

function MouseWheelHandler(event) {

	prevent(event);
	event.deltaY < 0 ? console.log('scrolling up'):console.log('scrolling down');
	count++;
	let newLeft = 600;
	newLeft -= 1;
	var ccc;
	console.log('NEWLEFT1 ' + newLeft);

	// if (event.deltaY > 0 && newLeft > 500) {
	if (event.deltaY > 0 && stopper == false) {
		dot.style.left = (600 - count * 3) + 'px';
		console.log(dot.style.left);
		newLeft = parseInt(dot.style.left);

		console.log('NEWLEFT 2 ' + newLeft);
	}
	else if (event.deltaY < 0 && stopper == false){
		console.log('CURRENNT LEFT: ' + dot.style.left);
		// dot.style.left = (dot.style.left + count) + 'px';
		ccc = parseInt(dot.style.left);
		// dot.style.left = (dot.style.left + count) + 'px';
		dot.style.left = (ccc + count) + 'px';
		newLeft = dot.style.left;
	}

	if (newLeft <= 500 || newLeft >= 600) {
		stopper = true;
	}
	else if (newLeft > 500 || newLeft < 600)  {
		stopper = false;
	}
}
var prevent = function prevent(x) {
	if (!stopper) {
		console.log('preventing');
		return x.preventDefault();
	}
}
Clone this wiki locally