for문을 활용한 3D레이어 제어 예제
7개 레이어를 쌓아서 스크롤 할 때마다 입체감이 느껴지는 페럴랙스 페이지 구현 예제
perspective()
css로 3D 효과를 주기 위해서 가장 중요한 것이 perspective다. 투영점, 원근감 등의 의미이며 3D 환경을 만들기 위해서 깊이감을 주어 입체감을 부여하는 것이다.
픽셀 기반의 길이 값을 지정할 수 있으며, z축을 따라 캔버스로부터 관찰자의 깊이감을 나타내게 된다.
그래서 perspective(300px)는 스크린으로부터 300px 만큼 떨어진 곳에 관찰자가 있다는 것을 근거로 3D 환경을 구성하게 된다.
HTML
<main>
<div class="progress"><span class="progressBar"></span></div>
<section class="mainPage">
<div class="imageWrap">
<div class="parallax_image" id="parallax_0"></div>
<div class="parallax_image" id="parallax_1"></div>
<div class="parallax_image" id="parallax_2"></div>
<div class="parallax_image" id="parallax_3"></div>
<div class="parallax_image" id="parallax_4"></div>
<div class="parallax_image" id="parallax_5"></div>
</div>
</section>
<section class="subPage">
<div class="innerWrap">
<div class="contWrap">
<p>
같지 귀는 불어 따뜻한 있으며, 위하여서 생의 뜨고, 말이다.
풀이 일월과 산야에 봄바람이다. 트고, 할지니, 목숨을 소담스러운
이것은 가치를 사막이다. 물방아 천지는 용감하고 위하여 원대하고,
오아이스도 안고, 방지하는 굳세게 보라. 것은 가치를 주며,
미묘한 것이다. 발휘하기 거친 찾아 같이, 속잎나고, 피가 아니더면,
반짝이는 곧 이것이다. 끝까지 살 주는 튼튼하며, 거선의 원대하고,
것은 길지 때문이다. 천지는 천자만홍이 눈에 피부가 꽃 길을 군영과 피다.
어디 있는 물방아 풀이 희망의 소담스러운 구하기 그것을 싸인 있으랴?
피가 원질이 같이, 두기 살 품고 열락의 우리의 있는가?
무한한 끓는 구하기 트고, 크고 뛰노는 황금시대의 것이다.
</p>
</div>
</div>
</section>
<section class="subPage">
<div class="innerWrap">
<div class="contWrap">
<p>
같지 귀는 불어 따뜻한 있으며, 위하여서 생의 뜨고, 말이다.
풀이 일월과 산야에 봄바람이다. 트고, 할지니, 목숨을 소담스러운
이것은 가치를 사막이다. 물방아 천지는 용감하고 위하여 원대하고,
오아이스도 안고, 방지하는 굳세게 보라. 것은 가치를 주며,
미묘한 것이다. 발휘하기 거친 찾아 같이, 속잎나고, 피가 아니더면,
반짝이는 곧 이것이다. 끝까지 살 주는 튼튼하며, 거선의 원대하고,
것은 길지 때문이다. 천지는 천자만홍이 눈에 피부가 꽃 길을 군영과 피다.
어디 있는 물방아 풀이 희망의 소담스러운 구하기 그것을 싸인 있으랴?
피가 원질이 같이, 두기 살 품고 열락의 우리의 있는가?
무한한 끓는 구하기 트고, 크고 뛰노는 황금시대의 것이다.
</p>
</div>
</div>
</section>
<section class="subPage">
<div class="innerWrap">
<div class="contWrap">
<p>
같지 귀는 불어 따뜻한 있으며, 위하여서 생의 뜨고, 말이다.
풀이 일월과 산야에 봄바람이다. 트고, 할지니, 목숨을 소담스러운
이것은 가치를 사막이다. 물방아 천지는 용감하고 위하여 원대하고,
오아이스도 안고, 방지하는 굳세게 보라. 것은 가치를 주며,
미묘한 것이다. 발휘하기 거친 찾아 같이, 속잎나고, 피가 아니더면,
반짝이는 곧 이것이다. 끝까지 살 주는 튼튼하며, 거선의 원대하고,
것은 길지 때문이다. 천지는 천자만홍이 눈에 피부가 꽃 길을 군영과 피다.
어디 있는 물방아 풀이 희망의 소담스러운 구하기 그것을 싸인 있으랴?
피가 원질이 같이, 두기 살 품고 열락의 우리의 있는가?
무한한 끓는 구하기 트고, 크고 뛰노는 황금시대의 것이다.
</p>
</div>
</div>
</section>
<section class="subPage lastPage">
<div class="innerWrap">
<div class="contWrap">
<p>
같지 귀는 불어 따뜻한 있으며, 위하여서 생의 뜨고, 말이다.
풀이 일월과 산야에 봄바람이다. 트고, 할지니, 목숨을 소담스러운
이것은 가치를 사막이다. 물방아 천지는 용감하고 위하여 원대하고,
오아이스도 안고, 방지하는 굳세게 보라. 것은 가치를 주며,
미묘한 것이다. 발휘하기 거친 찾아 같이, 속잎나고, 피가 아니더면,
반짝이는 곧 이것이다. 끝까지 살 주는 튼튼하며, 거선의 원대하고,
것은 길지 때문이다. 천지는 천자만홍이 눈에 피부가 꽃 길을 군영과 피다.
어디 있는 물방아 풀이 희망의 소담스러운 구하기 그것을 싸인 있으랴?
피가 원질이 같이, 두기 살 품고 열락의 우리의 있는가?
무한한 끓는 구하기 트고, 크고 뛰노는 황금시대의 것이다.
</p>
<p>
같지 귀는 불어 따뜻한 있으며, 위하여서 생의 뜨고, 말이다.
풀이 일월과 산야에 봄바람이다. 트고, 할지니, 목숨을 소담스러운
이것은 가치를 사막이다. 물방아 천지는 용감하고 위하여 원대하고,
오아이스도 안고, 방지하는 굳세게 보라. 것은 가치를 주며,
미묘한 것이다. 발휘하기 거친 찾아 같이, 속잎나고, 피가 아니더면,
반짝이는 곧 이것이다. 끝까지 살 주는 튼튼하며, 거선의 원대하고,
것은 길지 때문이다. 천지는 천자만홍이 눈에 피부가 꽃 길을 군영과 피다.
어디 있는 물방아 풀이 희망의 소담스러운 구하기 그것을 싸인 있으랴?
피가 원질이 같이, 두기 살 품고 열락의 우리의 있는가?
무한한 끓는 구하기 트고, 크고 뛰노는 황금시대의 것이다.
</p>
<p>
같지 귀는 불어 따뜻한 있으며, 위하여서 생의 뜨고, 말이다.
풀이 일월과 산야에 봄바람이다. 트고, 할지니, 목숨을 소담스러운
이것은 가치를 사막이다. 물방아 천지는 용감하고 위하여 원대하고,
오아이스도 안고, 방지하는 굳세게 보라. 것은 가치를 주며,
미묘한 것이다. 발휘하기 거친 찾아 같이, 속잎나고, 피가 아니더면,
반짝이는 곧 이것이다. 끝까지 살 주는 튼튼하며, 거선의 원대하고,
것은 길지 때문이다. 천지는 천자만홍이 눈에 피부가 꽃 길을 군영과 피다.
어디 있는 물방아 풀이 희망의 소담스러운 구하기 그것을 싸인 있으랴?
피가 원질이 같이, 두기 살 품고 열락의 우리의 있는가?
무한한 끓는 구하기 트고, 크고 뛰노는 황금시대의 것이다.
</p>
</div>
</div>
</section>
</main>CSS
* {
box-sizing: border-box;
}
body {
overflow-x: hidden;
background: linear-gradient(#4b0220, #691c46);
}
main {
position: relative;
}
section {
position: relative;
width: 100%;
}
section.mainPage {
padding-bottom: 50px;
}
section.mainPage h1.title {
position: fixed;
text-align: center;
color: #fff;
font-size: 2.7rem;
padding-top: 20vh;
width: 400px;
left: calc(50% - 200px);
}
section.mainPage .imageWrap {
height: 100vh;
}
section.mainPage .imageWrap .parallax_image {
position: fixed;
width: 100%;
height: inherit;
background-position: top center;
background-size: auto 100%;
background-repeat: no-repeat;
perspective: 300px;
}
section.mainPage .imageWrap .parallax_image:nth-child(1) {
background-image: url(../images/main_0.png);
}
section.mainPage .imageWrap .parallax_image:nth-child(2) {
background-image: url(../images/main_1.png);
}
section.mainPage .imageWrap .parallax_image:nth-child(3) {
background-image: url(../images/main_2.png);
}
section.mainPage .imageWrap .parallax_image:nth-child(4) {
background-image: url(../images/main_3.png);
}
section.mainPage .imageWrap .parallax_image:nth-child(5) {
background-image: url(../images/main_4.png);
}
section.mainPage .imageWrap .parallax_image:nth-child(6) {
background-image: url(../images/main_5.png);
background-size: cover;
}
section.mainPage .imageWrap .parallax_image:nth-child(7) {
background-image: url(../image/main_6.png);
background-size: cover;
}
section.subPage {
margin-top: 400px;
min-height: 60vh;
}
section.subPage .innerWrap {
position: relative;
}
section.subPage .innerWrap .contWrap {
margin: 0 auto;
background-color: rgba(0, 0, 0, 0.6);
padding: 20px 40px;
width: 700px;
}
@media only screen and (max-width: 768px) {
section.subPage .innerWrap .contWrap {
width: 100%;
}
}
section.subPage .innerWrap .contWrap p {
font-size: 16px;
line-height: 30px;
color: #fff;
margin: 20px 0;
}
section.subPage.lastPage {
margin-top: 200px;
}
section.subPage.lastPage .innerWrap {
width: 100%;
padding: 50px 0;
background-color: rgba(0, 0, 0, 0.9);
}
section.subPage.lastPage .innerWrap .contWrap {
background-color: rgba(0, 0, 0, 0);
}
JS
let scrollTop = 0;
let imageAll;
let totalNum = 0;
window.onload = function () {
progressBar = document.getElementsByClassName("progressBar")[0];
imageAll = document.querySelectorAll(".parallax_image");
// 이미지 갯 수를 구해 totalNum에 할당한다.
totalNum = imageAll.length;
window.addEventListener('scroll', scrollFunc);
}
function scrollFunc(e) {
scrollTop = this.scrollY;
for(var i=0; i< totalNum ; i++){
imageAll[i].style.transform = "perspective(400px) translateZ("+ scrollTop/(5*(totalNum-i)) +"px)";
console.log(scrollTop , scrollTop / (5*(totalNum-i)) );
}
}
프론트엔드 4년차