JSFiddle - React, Tailwind, and code Playground

by Barsala

HTML

<a id="containder">
        <div id="bloca"></div>
        <div id="blocb"></div>
        <div id="blocc"></div>
    </a>

CSS

* {
            margin: 0;
            padding: 0;
        }
        
        body {
            background-color: forestgreen;
        }
        
        #bloca {
            position: absolute;
            top: 0%;
            width: 100%;
            height: 1000px;
            background-size: cover;
            background-color: black;
            display: block;
            margin: auto;
            z-index: 2;
        }
        
        #blocb {
            position: absolute;
            top: 0;
            width: 100%;
            height: 1000px;
            background-size: cover;
            background-color: lightgoldenrodyellow;
            display: block;
            margin: auto;
            z-index: 1;
        }
        
        #blocc {
            top: 0%;
            position: absolute;
            width: 100%;
            height: 1000px;
            background-size: cover;
            background-color: lightcoral;
            display: block;
            margin: auto;
            z-index: 0;
        }
        
        #containder {
            border: 5px solid black;
            margin: 0px;
        }
        
        .slider {
            -webkit-animation-name: slider;
            -webkit-animation-duration: 1.5s;
            animation-name: slider;
            animation-duration: 3.5s;
        }
        
        @keyframes slider {
            0% {
                top: 1000px;
            }
            100% {
                top: 0;
            }
        }

JavaScript

var fdelta = 0;
        var ind = 0;
        var fin = 0;
        var blocks = document.getElementsByTagName("div");
        for (i = 0; i < blocks.length; i++) {
            blocks[i].addEventListener('mousewheel', function () {
                clic()
            }, false);
        }
        var topa = window.getComputedStyle(blocks[0], null).getPropertyValue("top");

        function clic() {
            var depart = Date.now();
            if ((depart > 1000 + fin) && (Math.abs(event.deltaY) > fdelta)) {
                ind = ind + 1;
                if (ind > (blocks.length - 1)) {
                    blocks[0].style.zIndex = "2";
                    blocks[1].style.zIndex = "0";
                    blocks[2].style.zIndex = "1";
                    ind = 0;
                    blocks[i].removeAttribute("slider");
                }
                blocks[ind].style.zIndex = "3";
                blocks[ind].classList.add("slider");
                fin = depart;
            }
            fdelta = Math.abs(event.deltaY);
        }