JSFiddle - React, Tailwind, and code Playground

by Park Mino

HTML

<div class="wrap">	
	<p class="bird"><img src="https://upload.wikimedia.org/wikipedia/ko/thumb/9/9e/%ED%8A%B8%EC%9C%84%ED%84%B0_%EB%A1%9C%EA%B3%A0_%282012%29.svg/172px-%ED%8A%B8%EC%9C%84%ED%84%B0_%EB%A1%9C%EA%B3%A0_%282012%29.svg.png" alt="bird" /></p>
	<p class="soju"><img src="https://m.hitejinro.com/assets/images/socialmedia/chamisul_fresh_4_pakage_2008.png" alt="소주" /></p>
	<div class="table"><img src="http://image.m.interior.hanssem.com/upload/product/1405044254334_2hofer.png" alt="" /></div>

	<div class="item">
		<div class="circle">
			<div class="set">
				<span class="itm itm1"></span>
				<span class="itm itm2"></span>
				<span class="itm itm3"></span>
				<span class="itm itm4"></span>
				<span class="itm itm5"></span>
				<span class="itm itm6"></span>
				<span class="itm itm7"></span>
				<span class="itm itm8"></span>
			</div>
			<div class="moonhide"></div>
		</div>				
	</div>	
	
	<div class="scrollBox on" id="scrollBox01">
		<div class="mountain size1"></div>
		<div class="mountain size2"></div>
	</div>
	<div class="scrollBox" id="scrollBox02">
		<div class="refrigerators"><img src="http://images.samsung.com/is/image/samsung/p5/sec/pcd/kitchen-appliances/kimchi-refrigerators/RQ57K9293S5-pc.png?$ORIGIN_PNG$" /></div>
	</div>
	<div class="scrollBox" id="scrollBox03">
		
	</div>
	<div class="scrollBox" id="scrollBox04">
	</div>

	<ul class="menu">
		<li class="on"><a href="#none">menu1</a></li>
		<li><a href="#none">menu2</a></li>
		<li><a href="#none">menu3</a></li>
		<li><a href="#none">menu4</a></li>
	</ul>
	<p class="btmLine"><span>&nbsp;</span></p>
</div>

CSS

*{margin:0;padding:0;list-style:none;}
html,body{height:100%;font-size:14px/1.5}
.wrap{position:relative;height:100%;}
.menu{position:fixed;top:30px;left:30px;z-index:200;}
.menu li.on a{font-weight:bold;color:#fff;}
.btmLine{position:fixed;left:0;bottom:0;width:100%;height:10px;background:#999;}
.btmLine span{display:block;width:0%;height:10px;background:#000;}

.wrap #scrollBox01{background:#ffcc00}
.wrap #scrollBox02{background:#66cc00}
.wrap #scrollBox03{background:#0033ff}
.wrap #scrollBox04{background:#000033}
.scrollBox{position:relative;overflow:hidden;font-size:50px;color:#fff;text-align:center;}
.scrollBox.on{font-size:100px;color:#000;}

.item{overflow:hidden;position:fixed;top:0;right:0;z-index:100;width:200px;height:200px;}
.item .circle {position:relative;width:150px;height: 150px;margin:25px 0 0 25px;border-radius:100%;background-color:#cc0000;}
.item .set{display:block;}
.item .set .itm{position:absolute;display:block;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:20px solid #cc0000;}
.item .set .itm.itm1{top:-25px;left:65px;-webkit-transform:scale(0) rotate(0deg);transform:scale(0) rotate(0deg);transition: all .1s ease-in-out;}
.item .set .itm.itm2{top:-1px;left:127px;-webkit-transform:scale(0) rotate(45deg);transform:scale(0) rotate(45deg);transition: all .2s ease-in-out;}
.item .set .itm.itm3{top:60px;left:155px;-webkit-transform:scale(0) rotate(90deg);transform:scale(0) rotate(90deg);transition: all .3s ease-in-out;}
.item .set .itm.itm4{top:130px;left:128px;-webkit-transform:scale(0) rotate(135deg);transform:scale(0) rotate(135deg);transition: all .4s ease-in-out;}
.item .set .itm.itm5{top:155px;left:65px;-webkit-transform:scale(0) rotate(180deg);transform:scale(0) rotate(180deg);transition: all .5s ease-in-out;}
.item .set .itm.itm6{top:130px;left:0px;-webkit-transform:scale(0) rotate(225deg);transform:scale(0) rotate(225deg);transition: all .6s ease-in-out;}
.item .set...

JavaScript

$(document).ready(function(){
	$(window).on('beforeunload', function() {
		$(window).scrollTop(0); 
	});

	$(window).resize(function(){
		 boxSet();
	}).resize();
	boxSet();

	var b_spd = 500,
	$mSize1 = $('.size1'),
	$mSize2 = $('.size2'),
	$mSize1left = $('.size1').offset().left,			
	$mSize2left = $('.size2').offset().left,
	$bird = $('.bird'),
	$soju = $('.soju'),
	$refri = $('.refrigerators'),
	$table = $('.table'),
	$bird_top = $bird.offset().top,
	$bird_left = $bird.offset().left,
	$soju_top = $soju.offset().top,
	$soju_left = $soju.offset().left,
	$table_top = $table.offset().top,
	$refri_left = $refri.offset().left;

	function boxSet(){
		var $h_doc = $(document).height(),
			$w_win = $(window).width(),
			$h_win = $(window).height()+17,
			$item = $('.item');

		$('.scrollBox').css({
			'width' : $w_win + 'px',
			'height' : $h_win + 'px',
		});
	}

	$(window).on('scroll', function(){
		var $h_doc = $(document).height(),
			$w_win = $(window).width(),
			$h_win = $(window).height(),		
			$h_scroll = $(this).scrollTop(),
			$end_scroll = $h_doc - $h_win,
			$scrollBoxlen = $('.scrollBox').length,
			$w_btmLine = ($h_scroll/$end_scroll)*100 + '%', 
			$item_top =  ($h_scroll/$h_doc)*100 + '%',
			$btmLine = $('p.btmLine span'),
			$item = $('.item'),
			$moonhide = $('.moonhide'),
			$bird_rleft = $('.bird').offset().left;

		$btmLine.css('width', $w_btmLine);
		$item.css({top:$item_top});
		$('.scrollBox').each(function(i){
			if($h_scroll>=i*$h_win&&$h_scroll<(i+1)*$h_win){
				$('.menu li').removeClass('on');
				$('.menu li').eq(i).addClass('on');
				$('.scrollBox').removeClass('on');				
				$('.scrollBox').eq(i).addClass('on');
				if(i == 0){
					$item.removeClass('ani');
					$item.addClass('on');
					$mSize1.css('left', $mSize1left + $h_scroll/4);
					$mSize2.css('left', $mSize2left + $h_scroll/1);
					$soju.hide();
				}else if(i ==...