JSFiddle - React, Tailwind, and code Playground

by Park Mino

HTML

<div id="wrap">
	<div class="menu">
		<ul>
			<li class="on"><a href="#none">1</a></li>
			<li><a href="#none">2</a></li>
			<li><a href="#none">3</a></li>
			<li><a href="#none">4</a></li>
		</ul>
	</div>
	<div class="container">
		<div class="scrollBox bgColor01 on">1</div>
		<div class="scrollBox bgColor02">2</div>
		<div class="scrollBox bgColor03">3</div>
		<div class="scrollBox bgColor04">4</div>
	</div>
</div>

CSS

*{padding:0;margin:0;list-style:none;}
#wrap{overflow:hidden;overflow-y:scroll;}
.menu{position:fixed;top:30px;left:30px;z-index:100;}
.menu ul li.on a{font-size:20px;color:#000;font-weight:bold;}

.container{position:fixed;width:100%;height:100%;left:0;top:0;z-index:1;}
.scrollBox{width:100%; height:100%; position:absolute; top:0px; left:0px; opacity:0.3; z-index:1;font-size:100px; color:#fff;text-align:center;}
.scrollBox.on{z-index:10;opacity:0.8;}

.bgColor01{background:#ff9900;}
.bgColor02{background:#0000ff}
.bgColor03{background:#cc0033}
.bgColor04{background:#808080}

JavaScript

$(document).ready(function(){
	$(window).resize(function(){
		 boxSet();
	}).resize();
	boxSet();
	function boxSet(){
		var $ww = $(window).width(),
			$wh = $(window).height(),
			$wrap = $('#wrap'),
			$wrapw = $wrap.width(),
			$boxlength = $('.scrollBox').length;

		$('body').css({
			height:$wh*$boxlength
		});
		$('.container').css('perspective', $wh);
		$('.scrollBox').css({
			width:$ww,
			height:$wh
		});
		$('.scrollBox').each(function(i) {
			$('.scrollBox').eq(i).css({'transform':'translateZ('+parseInt((-$wh*i))+'px)'});	
		});
	}



	$('.menu > ul > li').on('click', function(){
		var link = $(this).index(),
			$wh = $(window).height();
		$("body,html").stop().animate({"scrollTop":$wh*link},500);		
	});
	$(window).scroll(function(){
		var scroll = $(this).scrollTop(),
			$wh = $(window).height();
		$('.scrollBox').each(function(i) {
			$('.scrollBox').eq(i).css({'transform':'translateZ('+parseInt((-$wh*i)+scroll)+'px)'});	
			if(scroll>=i*$wh&&scroll<(i+1)*$wh){
				$('.menu li').removeClass('on');
				$('.menu li').eq(i).addClass('on');
				$('.scrollBox').removeClass('on');				
				$('.scrollBox').eq(i).addClass('on');
			}
		});
	});
});