JSFiddle - React, Tailwind, and code Playground

by healqq

HTML

<body>
		
	<div class="wrapper">
	    <div class="frame">
	    1
	    </div>
	    <div class="frame">
	    2
	    </div>
	    <div class="frame">
	    3
	    </div>
        <div class="frame">
	    4
	    </div>
        <div class="frame">
	    5
	    </div>
</div>
    </body>

CSS

.wrapper {
    position: relative;
    height: 800px;
}
.frame {
    top: 0px;
    background:#c5d8c5;
    width:100%;
    height: 800px;
    transition: all 3s ease;
    position: absolute;
}

JavaScript

//getting collection of frames
	var $elements = $('.frame');
	$elements.each(function(index, element) {
        
        var color = [getRandColor(), getRandColor(), getRandColor()].join(',');
        $(element).css('background-color', 'RGB(' + color + ')');

        function getRandColor() {
            return Math.floor(Math.random() * 255);
        }
    });
	shiftElements(0);
	//initialize our state control function
	var state = new SliderState($elements.size);

	$(window).on('wheel', scrollHandler);
	//state control object
	function SliderState(size) {
		this.current = 0;
		this.size = size;
		this.increment = increment;
		this.decrement = decrement;
		this.getCurrent = getCurrent;
		function increment() {
			this.current+= (this.size === (this.current + 1))?0:1;
			return this.current;
		}

		function decrement() {
			this.current+= (0 === this.current )?0:-1;
			return this.current;
		}

		function getCurrent() {
			return this.current;
		}

		return this;
	}	
	//scroll handler function
	function scrollHandler(event) {
		var oldCurrent = state.getCurrent();
		var currentItem;
		var delta = event.originalEvent.deltaY;
		if (delta > 0) {
			currentItem = state.increment();
		}
		else {
			currentItem = state.decrement();
	    }
	    if (currentItem !== oldCurrent) {
	    	shiftElements(currentItem);
	    }
	}
	//меняем свойство top
	function shiftElements(current){
		//получаем высоту фрейма
		var frameHeight = $('.frame').height();
		//сдвигаем фреймы
		for (var i=0;i<$elements.length;i++) {
			$($elements[i]).css('top', frameHeight*(i-current));
		}
	}