JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<video src="https://vod-progressive.akamaized.net/exp=1578680021~acl=%2A%2F1613956707.mp4%2A~hmac=e9ea3fbc319c22f7b2a7bd17d606421e80e45f4620752990d23c94e161e45f9f/vimeo-prod-skyfire-std-us/01/1799/15/383996077/1613956707.mp4" autoplay muted loop></video>
<div id="tablet-version" class="active-0">
  <div class="tablet-body" style="background: red;"></div>
  <div class="tablet-body" style="background: green;"></div>
  <div class="tablet-body" style="background: yellow;"></div>
  <div class="tablet-body" style="background: blue;"></div>
</div>

CSS

body {
  margin: 0;
}
#tablet-version {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 100%;
  left: 0;
  transition: 1s;
  transform: translate(0,0);
}
#tablet-version.active-1 {
  transform: translate(0,-100%);
}
#tablet-version.active-2 {
  transform: translate(0,-200%);
}
#tablet-version.active-3 {
  transform: translate(0,-300%);
}
#tablet-version.active-4 {
  transform: translate(0,-400%);
}
#tablet-version .tablet-body {
  width: 100%;
  height: 100%;
  position: relative;
}

JavaScript

var elem = document.querySelector('#tablet-version'),
		edge = true,
    current = 0,
    carWheel = true

document.addEventListener('wheel', function(e){
	if(e.deltaY > 0 && carWheel){
  	carWheel = false;
  	elem.classList.remove('active-' + current);
    current++;
    elem.classList.add('active-' + current);
    setTimeout(function(){
    	carWheel = true;
    },1000)
  }
})