Cycle through slide using the scroll wheel

scroll-slide.js

var FADE_DURATION = 100

// The slides; should be hidden initially except for the
// first one via CSS
var $slides = $('.scroll-slide')

var $window = $(window)
var $document = $(document)
var isAnimating = false
var currentSlide = 0

// Toggle the isAnimating flag, optionally with a force value
var toggleIsAnimating = function (forceValue) {
  isAnimating = forceValue === undefined ? !isAnimating : forceValue
}

var showNext = function () {
  // Cycle through the slides
  var nextSlide = (currentSlide + 1) % $slides.length

  // Set the isAnimating flag to true
  toggleIsAnimating(true)

  // Fade out the current slide
  $slides.eq(currentSlide).fadeOut(FADE_DURATION, function () {
    // When the animation finished, fade in the next slide
    // and after that set the isAnimating flag to false again
    $slides.eq(nextSlide).fadeIn(FADE_DURATION, toggleIsAnimating)
    // Set the current slide to the next slide
    currentSlide = nextSlide
  })
}

// Analogous to nextSlide
var showPrev = function () {
  var prevSlide = ($slides.length + currentSlide - 1) % $slides.length

  toggleIsAnimating(true)

  $slides.eq(currentSlide).fadeOut(FADE_DURATION, function () {
    $slides.eq(prevSlide).fadeIn(FADE_DURATION, toggleIsAnimating)
    currentSlide = prevSlide
  })
}

var handleWheel = function (event) {
  if (isAnimating) {
    // Ignore wheel events while transitioning between
    // two slides
    return
  }

  var scrollTop = $window.scrollTop()
  var windowHeight = $window.height()
  var documentHeight = $document.height()

  if (
    // If the wheel is scrolled up...
    event.deltaY < 0 &&
    // ... and the viewport is at the top of the page...
    scrollTop === 0
  ) {
    // ... show the previous slide
    showPrev()
  } else if (
    // If the wheel is scrolled down...
    event.deltaY > 0 &&
    // ... and the viewport is at the bottom of the page...
    scrollTop + windowHeight === documentHeight
  ) {
    // ... show the next slide
    showNext()
  }
}

// Also handle keyboard events to keep the
// page accessible
var handleKeyup = function (event) {
  if (isAnimating) {
    return
  }

  if (event.code === 'ArrowUp') {
    showPrev()
  } else if (event.code === 'ArrowDown') {
    showNext()
  }
}

window.addEventListener('wheel', handleWheel)
window.addEventListener('keyup', handleKeyup)