패럴랙스 이펙트 01
이번 시간에는 페럴랙스 이펙트에 대해 알아보겠습니다.
패럴랙스 이펙트 01
스크롤을 내리면 scrollTop의 값이 나오고 section별로 offset의 좌표값이 나타나 있습니다.
메뉴를 누르면 부드럽게 이동합니다.
01. HTML 코드
이전과 중복되는 모달박스 코드는 생략하였습니다.
{
<body class="img10">
<header id="header">
<h1>Javascript parallax Effect01</h1>
<p>패럴렉스 이펙트</p>
<ul>
<li class="active"><a href="mouseEffect01.html">1</a></li>
<li><a href="mouseEffect02.html">2</a></li>
<li><a href="mouseEffect03.html">3</a></li>
<li><a href="mouseEffect04.html">4</a></li>
<li><a href="mouseEffect05.html">5</a></li>
<li><a href="mouseEffect06.html">6</a></li>
<li><a href="mouseEffect07.html">7</a></li>
</ul>
</header>
<!-- //header -->
<nav id="parallax__nav">
<ul>
<li class="active"><a href="#section1">메뉴1</a></li>
<li><a href="#section2">메뉴2</a></li>
<li><a href="#section3">메뉴3</a></li>
<li><a href="#section4">메뉴4</a></li>
<li><a href="#section5">메뉴5</a></li>
<li><a href="#section6">메뉴6</a></li>
<li><a href="#section7">메뉴7</a></li>
<li><a href="#section8">메뉴8</a></li>
<li><a href="#section9">메뉴9</a></li>
</ul>
</nav>
<main id="parallax__cont">
<div id="contents">
<section id="section1" class="content__item">
<span class="content__item__num">01</span>
<h2 class="content__item__title">section1</h2>
<figure class="content__item__imgWrap">
<div class="content__item__img"></div>
</figure>
<p class="content__item__desc">결과도 중요하지만, 과정을 더 중요하게 생각한다.</p>
</section>
<!-- //section1 -->
<section id="section2" class="content__item">
<span class="content__item__num">02</span>
<h2 class="content__item__title">section2</h2>
<figure class="content__item__imgWrap">
<div class="content__item__img"></div>
</figure>
<p class="content__item__desc">피할수 없으면 즐겨라</p>
</section>
<!-- //section2 -->
<section id="section3" class="content__item">
<span class="content__item__num">03</span>
<h2 class="content__item__title">section3</h2>
<figure class="content__item__imgWrap">
<div class="content__item__img"></div>
</figure>
<p class="content__item__desc">승리하면 조금 배울 수 있고 패배하면 모든 것을 배울 수 있다</p>
</section>
<!-- //section3 -->
<section id="section4" class="content__item">
<span class="content__item__num">04</span>
<h2 class="content__item__title">section4</h2>
<figure class="content__item__imgWrap">
<div class="content__item__img"></div>
</figure>
<p class="content__item__desc">과거를 지배하는 자가 마래를 지배하며 현재를 지배하는 자가 과거를 지배한다.</p>
</section>
<!-- //section4 -->
<section id="section5" class="content__item">
<span class="content__item__num">05</span>
<h2 class="content__item__title">section5</h2>
<figure class="content__item__imgWrap">
<div class="content__item__img"></div>
</figure>
<p class="content__item__desc">세상은 고통으로 가득하지만 한편 그것을 이겨내는 일로도 가득차 있다</p>
</section>
<!-- //section5 -->
<section id="section6" class="content__item">
<span class="content__item__num">06</span>
<h2 class="content__item__title">section6</h2>
<figure class="content__item__imgWrap">
<div class="content__item__img"></div>
</figure>
<p class="content__item__desc">가장 하기 힘든 일은 아무 일도 안하는 것이다</p>
</section>
<!-- //section6 -->
<section id="section7" class="content__item">
<span class="content__item__num">07</span>
<h2 class="content__item__title">section7</h2>
<figure class="content__item__imgWrap">
<div class="content__item__img"></div>
</figure>
<p class="content__item__desc">말을 많이 하는 것과 말을 잘하는 것은 다르다.</p>
</section>
<!-- //section7 -->
<section id="section8" class="content__item">
<span class="content__item__num">08</span>
<h2 class="content__item__title">section8</h2>
<figure class="content__item__imgWrap">
<div class="content__item__img"></div>
</figure>
<p class="content__item__desc">오늘 할 수 있는 일에 전력을 다하라, 그러면 내일에는 한 걸음 더 진보한다. </p>
</section>
<!-- //section8 -->
<section id="section9" class="content__item">
<span class="content__item__num">09</span>
<h2 class="content__item__title">section9</h2>
<figure class="content__item__imgWrap">
<div class="content__item__img"></div>
</figure>
<p class="content__item__desc">끝을 맺기를 처음과 같이 하면 실패가 없다.</p>
</section>
<!-- //section9 -->
</div>
</main>
<!-- //main -->
<aside id="parallax__info">
<div class="scroll">scrollTop : <span>0</span>px</div>
<div class="infoTop">
<ul>
<li>#section1 offset() : <span class="offset1">0</span>px</li>
<li>#section2 offset() : <span class="offset2">0</span>px</li>
<li>#section3 offset() : <span class="offset3">0</span>px</li>
<li>#section4 offset() : <span class="offset4">0</span>px</li>
<li>#section5 offset() : <span class="offset5">0</span>px</li>
<li>#section6 offset() : <span class="offset6">0</span>px</li>
<li>#section7 offset() : <span class="offset7">0</span>px</li>
<li>#section8 offset() : <span class="offset8">0</span>px</li>
<li>#section9 offset() : <span class="offset9">0</span>px</li>
</ul>
</div>
</aside>
<!-- parallax__info -->
}
02. CSS 코드
{
/* parallax__nav */
#parallax__nav {
position:fixed;
right: 20px;
top: 20px;
z-index: 2000;
background-color: rgba(0,0,0,0.4);
padding: 20px 30px;
border-radius: 50px;
}
#parallax__nav li {
display: inline;
margin: 0 5px;
}
#parallax__nav li a {
display: inline-block;
height: 30px;
padding: 5px 20px;
text-align: center;
line-height: 30px;
}
#parallax__nav li.active a {
background-color: #fff;
color: #000;
border-radius: 20px;
box-sizing: content-box;
}
#parallax__cont {
max-width: 1600px;
width: 98%;
margin: 0 auto;
/* background-color: rgba(255,255,255,0.1); */
}
.content__item {
width: 1000px;
max-width: 70vw;
margin: 30vw auto;
/* background-color: rgba(255,255,255,0.3); */
text-align: left;
margin-right: 0;
position: relative;
padding-top: 8vw;
}
.content__item:nth-child(even){
margin-left: 0;
text-align: right;
}
.content__item__num {
font-size: 35vw;
font-family: 'Lato';
font-weight: 100;
position: absolute;
left: -5vw;
top: -16vw;
opacity: 0.07;
z-index: -2;
}
.content__item:nth-child(even) .content__item__num {
left: auto;
right: -5vw;
}
.content__item__title {
font-weight: 400;
text-transform: capitalize;
}
.content__item__imgWrap {
width: 100%;
padding-bottom: 56.25%;
background: #000;
position: relative;
overflow: hidden;
z-index: -1;
}
.content__item__img {
position: absolute;
background: url(../assets/img/effect_bg18-min.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
width: 110%;
height: 110%;
left: -5%;
top: -5%;
filter: saturate(0%);
transition: all 1s;
padding-top: 8vw;
}
.content__item:nth-child(1) .content__item__img {
background-image: url(../assets/img/effect_bg14-min.jpg);
}
.content__item:nth-child(2) .content__item__img {
background-image: url(../assets/img/effect_bg15-min.jpg);
}
.content__item:nth-child(3) .content__item__img {
background-image: url(../assets/img/effect_bg16-min.jpg);
}
.content__item:nth-child(4) .content__item__img {
background-image: url(../assets/img/effect_bg17-min.jpg);
}
.content__item:nth-child(5) .content__item__img {
background-image: url(../assets/img/effect_bg18-min.jpg);
}
.content__item:nth-child(6) .content__item__img {
background-image: url(../assets/img/effect_bg19-min.jpg);
}
.content__item:nth-child(7) .content__item__img {
background-image: url(../assets/img/effect_bg01-min.jpg);
}
.content__item:nth-child(8) .content__item__img {
background-image: url(../assets/img/effect_bg02-min.jpg);
}
.content__item:nth-child(9) .content__item__img {
background-image: url(../assets/img/effect_bg03-min.jpg);
}
.content__item__desc {
font-size: 4vw;
line-height: 1.4;
margin-top: -5vw;
margin-left: -4vw;
word-break: keep-all;
}
.content__item:nth-child(even) .content__item__desc {
margin-left: auto;
margin-right: -4vw;
}
#parallax__info {
position: fixed;
left: 20px;
bottom: 20px;
z-index: 2000;
background-color: rgba(0,0,0,0.4);
color: #fff;
padding: 20px;
border-radius: 10px;
}
#parallax__info li, .scrollTop {
line-height: 1.4;
}
@media (max-width: 800px){
#parallax__cont {
margin-top: 70vw;
}
#parallax__nav {
padding: 10px;
right: auto;
left: 10px;
top: 50%;
transform: translateY(-50%);
border-radius: 5px;
background-color: rgba(0,0,0,0.8);
}
#parallax__nav li {
display: block;
margin: 5px;
}
#parallax__nav li a {
font-size: 14px;
padding: 5px;
border-radius: 5px;
height: auto;
line-height: 1;
}
#parallax__nav li.active a {
border-radius: 5px;
}
#parallax__info {
left: 10px;
bottom: 10px;
}
}
}
03. script 코드
forEach문을 사용해서 scrollTop의 값이 offset값을 넘었을 경우,
해당 섹션으로 이동하게 해주며 active를 걸어주고 기존 active는 제거해줍니다.
behavior:"smooth"를 줘서 li클릭으로 인한 스크롤 이동을 부드럽게 해줍니다.
{
const scroll = document.querySelector("#parallax__info .scroll span");
window.addEventListener("scroll", () => {
// scrollTop값 구하는 방법 3가지
// let scrollTop = window.pageYOffset;
// let scrollTop = window.scrollY;
// let scrollTop = document.documentElement.scrollTop;
// 3가지 모두 사용가능
let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;
// 노가다 방식
// if(scrollTop >= document.getElementById("section1").offsetTop){
// document.querySelectorAll("#parallax__nav li").forEach(li => {
// li.classList.remove("active");
// });
// document.querySelector("#parallax__nav li:nth-child(1)").classList.add("active");
// }
// if(scrollTop >= document.getElementById("section2").offsetTop){
// document.querySelectorAll("#parallax__nav li").forEach(li => {
// li.classList.remove("active");
// });
// document.querySelector("#parallax__nav li:nth-child(2)").classList.add("active");
// }
// if(scrollTop >= document.getElementById("section3").offsetTop){
// document.querySelectorAll("#parallax__nav li").forEach(li => {
// li.classList.remove("active");
// });
// document.querySelector("#parallax__nav li:nth-child(3)").classList.add("active");
// }
// if(scrollTop >= document.getElementById("section4").offsetTop){
// document.querySelectorAll("#parallax__nav li").forEach(li => {
// li.classList.remove("active");
// });
// document.querySelector("#parallax__nav li:nth-child(4)").classList.add("active");
// }
// if(scrollTop >= document.getElementById("section5").offsetTop){
// document.querySelectorAll("#parallax__nav li").forEach(li => {
// li.classList.remove("active");
// });
// document.querySelector("#parallax__nav li:nth-child(5)").classList.add("active");
// }
// if(scrollTop >= document.getElementById("section6").offsetTop){
// document.querySelectorAll("#parallax__nav li").forEach(li => {
// li.classList.remove("active");
// });
// document.querySelector("#parallax__nav li:nth-child(6)").classList.add("active");
// }
// if(scrollTop >= document.getElementById("section7").offsetTop){
// document.querySelectorAll("#parallax__nav li").forEach(li => {
// li.classList.remove("active");
// });
// document.querySelector("#parallax__nav li:nth-child(7)").classList.add("active");
// }
// if(scrollTop >= document.getElementById("section8").offsetTop){
// document.querySelectorAll("#parallax__nav li").forEach(li => {
// li.classList.remove("active");
// });
// document.querySelector("#parallax__nav li:nth-child(8)").classList.add("active");
// }
// if(scrollTop >= document.getElementById("section9").offsetTop){
// document.querySelectorAll("#parallax__nav li").forEach(li => {
// li.classList.remove("active");
// });
// document.querySelector("#parallax__nav li:nth-child(9)").classList.add("active");
// }
// for문
// for(let i=1; i<=9; i++) {
// if(scrollTop >= document.getElementById("section"+i).offsetTop){
// document.querySelectorAll("#parallax__nav li").forEach(li => {
// li.classList.remove("active");
// });
// document.querySelector("#parallax__nav li:nth-child("+i+")").classList.add("active");
// }
// }
// forEach문
document.querySelectorAll(".content__item").forEach((element, index) => {
if(scrollTop >= element.offsetTop -2){
document.querySelectorAll("#parallax__nav li").forEach(li => {
li.classList.remove("active");
});
document.querySelector("#parallax__nav li:nth-child("+(index+1)+")").classList.add("active");
}
});
// info
// scroll.innerText = Math.round(scrollTop);
document.querySelector("#parallax__info .scroll span").innerText = Math.round(scrollTop);
// document.querySelector(".offset1").innerText = document.getElementById("section1").offsetTop;
// document.querySelector(".offset2").innerText = document.getElementById("section2").offsetTop;
// document.querySelector(".offset3").innerText = document.getElementById("section3").offsetTop;
// document.querySelector(".offset4").innerText = document.getElementById("section4").offsetTop;
// document.querySelector(".offset5").innerText = document.getElementById("section5").offsetTop;
// document.querySelector(".offset6").innerText = document.getElementById("section6").offsetTop;
// document.querySelector(".offset7").innerText = document.getElementById("section7").offsetTop;
// document.querySelector(".offset8").innerText = document.getElementById("section8").offsetTop;
// document.querySelector(".offset9").innerText = document.getElementById("section9").offsetTop;
for(let i=1; i<=9; i++) {
document.querySelector(".offset" + i).innerText = document.getElementById("section" + i).offsetTop;
}
});
// 스크롤 이동
document.querySelectorAll("#parallax__nav li a").forEach(li => {
li.addEventListener("click", (e) => {
e.preventDefault();
document.querySelector(li.getAttribute("href")).scrollIntoView({
behavior: "smooth" //부드럽게
});
});
});
04. 그림으로 이해하기
'Javascript응용_Effect' 카테고리의 다른 글
| Parallax Effect 03 (1) | 2022.09.13 |
|---|---|
| Parallax Effect 02 (1) | 2022.09.13 |
| Mouse Effect 01 (2) | 2022.09.06 |
| Slider Effect 03 (4) | 2022.09.02 |
| Slider Effect 02 (4) | 2022.08.29 |
댓글