[jQuery] 페럴럭스 기초

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

.wrap div:nth-child(1){background:#ffcc00}
.wrap div:nth-child(2){background:#0066cc}
.wrap div:nth-child(3){background:#cc3366}
.wrap div:nth-child(4){background:#66cc66}
.scrollBox{font-size:50px;color:#fff;text-align:center;}
.scrollBox.on{font-size:100px;color:#000;}

</style>

<div class="wrap">
<div class="scrollBox on" id="scrollBox01">1</div>
<div class="scrollBox" id="scrollBox02">2</div>
<div class="scrollBox" id="scrollBox03">3</div>
<div class="scrollBox" id="scrollBox04">4</div>


<ul class="menu">
<!-- <li><a href="#scrollBox01">menu1</a></li>
<li><a href="#scrollBox02">menu2</a></li>
<li><a href="#scrollBox03">menu3</a></li>
<li><a href="#scrollBox04">menu4</a></li> -->
<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>

<script type="text/javascript">
$(document).ready(function(){
$(window).resize(function(){
boxSet();
}).resize();
boxSet();
var b_spd = 500;

function boxSet(){
var $w_win = $(window).width(),
$h_win = $(window).height();
$('.scrollBox').css({
'width' : $w_win + 'px',
'height' : $h_win + 17 + '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;
$w_btmLine = ($h_scroll/$end_scroll)*100 + '%',
$btmLine = $('p.btmLine span');

$btmLine.css('width', $w_btmLine);
$('.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');
}
});
});


$('.menu li').on('click', function(){
var link = $(this).index();
//$('body').stop().animate({scrollTop:$(this.hash).offset().top}, b_spd);
$('html, body').stop().animate({scrollTop:$('.scrollBox').eq(link).offset().top}, b_spd);
});
});
</script>


Mh : https://jsfiddle.net/aoiyuki4u/etyzn30L/
JM : https://jsfiddle.net/_ksm/nn3zj1c2/