Creating a RevealJS clone with CSS Scroll Snap Points

My slides (in french)

CSS Scroll Snap Points

Intersection Observer

if ('IntersectionObserver' in window) { 
// IntersectionObserver Supported
let config = {
root: null,
rootMargin: '0px',
threshold: 0.5
};
let observer = new IntersectionObserver(onChange, config);
slides.forEach(slide => observer.observe(slide));
} else {
// IntersectionObserver NOT Supported
console.log('Whomp Whomp Whomp');
}
function onChange(changes) { 
changes.forEach(change => {
if (change.intersectionRatio > 0.5) {
change.target.classList.add('is-active');
history.pushState(null, null, location.pathname + location.search + '#' + change.target.getAttribute('id'));
} else { change.target.classList.remove('is-active'); }
});
}

Add contents that appear/move

<button class="js-next" data-next="next_2">Ce qui change…</button>

Managing the remote control

if (eventName === 'keydown' && 34 === e.keyCode) { 
let activeSlide = document.querySelector('.slide.is-active');
let buttonNext = activeSlide.querySelector('.js-next:not(.has-been-pressed)');
if (buttonNext) {
buttonNext.click();
} else {
let buttonAnim = activeSlide.querySelector('.js-anim:not(.has-been-played)');
if (buttonAnim) {
buttonAnim.click();
} else {
let slides = [].slice.call(document.querySelectorAll('.slide'));
selectSlideInList(slides, 'next');
}
}
}

To conclude

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store