210913 오늘은 예제를 통해 마우스 스크롤을 내리면 z축 순서대로 배치한 요소들이 앞으로 나오는 것처럼 보이는 효과를 구현해 보았다.
section {perspective: 2300px;}
section article:nth-child(1) {transform: translateZ(0px);}
section article:nth-child(2) {transform: translateZ(-5000px);}
section article:nth-child(3) {transform: translateZ(-10000px);}
$(window).scroll(function() {
var scr = Math.floor($(this).scrollTop()); //현재 스크롤 위치
// z값을 준 article마다 현재 스크롤 위치를 더해준다.
$("article").eq(0).css({"transform":`translateZ(${0 + scr}px)`})
});
var posX=e.pageX/100;
var posY=e.pageY/150;