Last active
July 25, 2021 17:16
Star
You must be signed in to star a gist
Tutorial: Scroll the Screen with One Mouse Scroll
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Define an objects containing how many slides do we have and their anchors. | |
let slides = { | |
slide1: { | |
top: { hidden: false }, | |
leave: { hidden: true } | |
}, | |
slide2: { | |
top: { hidden: true }, | |
enter: { hidden: true }, | |
leave: { hidden: true } | |
}, | |
slide3: { | |
top: { hidden: true }, | |
enter: { hidden: true }, | |
leave: { hidden: true } | |
} | |
} | |
// A variable object used to store the slides selectors | |
let elements = { | |
slide1: { scrollTo: null, top: null, leave: null }, | |
slide2: { scrollTo: null, top: null, enter: null, leave: null }, | |
slide3: { scrollTo: null, top: null, enter: null, leave: null } | |
} | |
$w.onReady(function () { | |
// Run these functions once the page is ready | |
defineElements(); // Define the actual elements. | |
defineEvents(); // Define the event handlers | |
}); | |
function defineElements() { | |
// A function that will scroll to a given slide by passing its index (starting from 1). | |
const goTo = (slideNumber) => { | |
let id = `#slide${slideNumber}top`; | |
if ($w(id).id) { | |
return Promise.resolve($w(id).scrollTo()); | |
} else { | |
return Promise.reject(); | |
} | |
} | |
// Slide 1 Elements | |
elements.slide1.top = $w('#slide1top'); | |
elements.slide1.leave = $w('#slide1leave'); | |
elements.slide1.scrollTo = goTo; // Assigning the goTo function to the slide's scrollTo method | |
// Slide 2 Elements | |
elements.slide2.top = $w('#slide2top'); | |
elements.slide2.enter = $w('#slide2enter'); | |
elements.slide2.leave = $w('#slide2leave'); | |
elements.slide2.scrollTo = goTo; // Assigning the goTo function to the slide's scrollTo method | |
// Slide 3 Elements | |
elements.slide3.top = $w('#slide3top'); | |
elements.slide3.enter = $w('#slide3enter'); | |
elements.slide3.leave = $w('#slide3leave'); | |
elements.slide3.scrollTo = goTo; // Assigning the goTo function to the slide's scrollTo method | |
} | |
function defineEvents() { | |
// Watch the tutorial video to understand. | |
// Slide 1: ================================================================== | |
elements.slide1.top.onViewportEnter(() => { slides.slide1.top.hidden = false; }); | |
elements.slide1.top.onViewportLeave(() => { slides.slide1.top.hidden = true; }); | |
elements.slide1.leave.onViewportEnter(() => { | |
slides.slide1.leave.hidden = false; | |
if (!slides.slide2.top.hidden) { | |
elements.slide1.scrollTo(1); | |
} | |
}); | |
elements.slide1.leave.onViewportLeave(() => { slides.slide1.leave.hidden = true; }); | |
// Slide 2: ================================================================== | |
elements.slide2.top.onViewportEnter(() => { slides.slide2.top.hidden = false; }); | |
elements.slide2.top.onViewportLeave(() => { slides.slide2.top.hidden = true; }); | |
elements.slide2.enter.onViewportEnter(() => { | |
slides.slide2.enter.hidden = false; | |
if (slides.slide2.leave.hidden && slides.slide1.top.hidden) { | |
elements.slide2.scrollTo(2); | |
} | |
}); | |
elements.slide2.enter.onViewportLeave(() => { slides.slide2.enter.hidden = true; }); | |
elements.slide2.leave.onViewportEnter(() => { | |
slides.slide2.leave.hidden = false; | |
if (slides.slide2.enter.hidden && slides.slide2.top.hidden && !slides.slide3.top.hidden) { | |
elements.slide2.scrollTo(2); | |
} | |
}); | |
elements.slide2.leave.onViewportLeave(() => { slides.slide2.leave.hidden = true; }); | |
// Slide 3: ================================================================== | |
elements.slide3.top.onViewportEnter(() => { slides.slide3.top.hidden = false; }); | |
elements.slide3.top.onViewportLeave(() => { slides.slide3.top.hidden = true; }); | |
elements.slide3.leave.onViewportEnter(() => { slides.slide3.leave.hidden = false; }); | |
elements.slide3.leave.onViewportLeave(() => { slides.slide3.leave.hidden = true; }); | |
elements.slide3.enter.onViewportEnter(() => { | |
slides.slide3.enter.hidden = false; | |
console.info(slides.slide2.leave.hidden) | |
if (slides.slide3.leave.hidden && !slides.slide2.leave.hidden) { | |
elements.slide3.scrollTo(3); | |
} | |
}); | |
elements.slide3.enter.onViewportLeave(() => { slides.slide3.enter.hidden = true; }); | |
// =========================================================================== | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment