Skip to content

Instantly share code, notes, and snippets.

  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save nasriyasoftware/2ff771e756a80f9b34e8673c06b8912e to your computer and use it in GitHub Desktop.
Tutorial: Scroll the Screen with One Mouse Scroll
// 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