JSFiddle - React, Tailwind, and code Playground

by LĂ©o Durand

HTML

<div class="ecampus">
  E-CAMPUS
  <br />(Scroll down)
</div>
<div class="pegasebuzz">
  PEGASEBUZZ
</div>
<div class="notrecoin">
  NOTRE COIN
</div>

CSS

body {
  margin: 0;
}

.ecampus {
  width: 100%;
  height: 100%;
  background: red;
  display: block;
  position: absolute;
}

.pegasebuzz {
  width: 100%;
  height: 100%;
  background: blue;
  display: none;
  position: absolute;
}

.notrecoin {
  width: 100%;
  height: 100%;
  background: yellow;
  display: none;
  position: absolute;
}

JavaScript

var scroll = 0;
$('body').bind('mousewheel', function(e) {
  if (scroll < 8) scroll++;
  else {
    scroll = 0;
    if ($('.ecampus').css('display') == 'block') {

      if (e.originalEvent.wheelDelta < 0) {

        $('.ecampus').fadeOut();
        $('.pegasebuzz').fadeIn();
      } else {
        // TOP PAGE
      }
      return;
    }

    if ($('.pegasebuzz').css('display') == 'block') {
      if (e.originalEvent.wheelDelta < 0) {
        $('.pegasebuzz').fadeOut();
        $('.notrecoin').fadeIn();
      } else {
        $('.pegasebuzz').fadeOut();
        $('.ecampus').fadeIn();
      }
      return;
    }

    if ($('.notrecoin').css('display') == 'block') {
      if (e.originalEvent.wheelDelta < 0) {
        // BOTTOM PAGE
      } else {

        $('.notrecoin').fadeOut();
        $('.pegasebuzz').fadeIn();
      }
      return;
    }

  }
});