[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