[jQuery] 페럴럭스 기초 - 2 : translateZ

<style type="text/css">
*{padding:0;margin:0;list-style:none;}
/*body{height:14000px;}*/
#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:nth-child(1){transform: translateZ(0px)}
.scrollBox:nth-child(2){transform: translateZ(-1069px)}
.scrollBox:nth-child(3){transform: translateZ(-6000px)}
.scrollBox:nth-child(4){transform: translateZ(-9000px)}*/
.scrollBox.on{z-index:10;opacity:0.8;}

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

<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>

<script type="text/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');
}
});
});
});
</script>