패럴랙스 효과
패럴랙스 이펙트 - 나타나기
이번에는 사진들이 평소에 보이지 않다가, 화면을 스크롤해서 가운데쯤 나타났을때 사진이 나타나는 효과를 만들어보겠습니다.
결과
HTML 작성
메뉴바를 지워주고 각각의 섹션들만 만들어줍니다.
소스 보기
<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">하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다.</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>
CSS 작성
평소에 opactity 값을 0을줘서 보이지 않게 설정하고 show라는 클래스가 추가될 때 보이게 설정합니다.
결과
/* 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;
transition: top 0.4s ease;
}
#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: #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-weight: 100;
font-family: 'Lato';
position: absolute;
left: -5vw;
top: -13vw;
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_bg19@2x.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;
}
.content__item:nth-child(1) .content__item__img {
background-image: url(../assets/img/effect_bg18@2x.jpg);
}
.content__item:nth-child(2) .content__item__img {
background-image: url(../assets/img/effect_bg19@2x.jpg);
}
.content__item:nth-child(3) .content__item__img {
background-image: url(../assets/img/effect_bg20@2x.jpg);
}
.content__item:nth-child(4) .content__item__img {
background-image: url(../assets/img/effect_bg17@2x.jpg);
}
.content__item:nth-child(5) .content__item__img {
background-image: url(../assets/img/effect_bg16@2x.jpg);
}
.content__item:nth-child(6) .content__item__img {
background-image: url(../assets/img/effect_bg15@2x.jpg);
}
.content__item:nth-child(7) .content__item__img {
background-image: url(../assets/img/effect_bg14@2x.jpg);
}
.content__item:nth-child(8) .content__item__img {
background-image: url(../assets/img/effect_bg13@2x.jpg);
}
.content__item:nth-child(9) .content__item__img {
background-image: url(../assets/img/effect_bg12@2x.jpg);
}
.content__item__desc {
font-size: 4vw;
line-height: 1.4;
margin-top: -4vw;
margin-left: -4vw;
word-break: keep-all;
}
.content__item:nth-child(even) .content__item__desc {
margin-left: auto;
margin-right: -4vw;
}
@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;
}
}
/* 한번에 나타나기 */
/* #contents > section {
opacity: 0;
transition: all 1s;
}
#contents > section.show {
opacity: 1;
} */
/* 개별적으로 나타나기 */
#contents > section .content__item__num {
opacity: 0;
transform: translateY(200px);
transition: all 1s 0.05s cubic-bezier(0.73,-0.03, 0.29, 1.05);
}
#contents > section .content__item__title {
opacity: 0;
transform: translateX(-100px);
transition: all 1s 0.15s cubic-bezier(0.73,-0.03, 0.29, 1.05);
}
#contents > section .content__item__imgWrap {
opacity: 0;
transform: translateY(200px) rotate(30deg) skew(20deg);
transition: all 1s 0.3s cubic-bezier(0.73,-0.03, 0.29, 1.05);
}
#contents > section .content__item__desc {
opacity: 0;
transform: translateX(-200px);
transition: all 1s 0.6s cubic-bezier(0.73,-0.03, 0.29, 1.05);
}
#contents > section.show .content__item__num {
opacity: 0.07;
transform: translateY(0);
}
#contents > section.show .content__item__title {
opacity: 1;
transform: translateX(0);
}
#contents > section.show .content__item__imgWrap {
opacity: 1;
transform: translateY(0) rotate(0) skew(0);
}
#contents > section.show .content__item__desc {
opacity: 1;
transform: translateX(0);
}
#contents > section:nth-child(even) .content__item__title {
transform: translateX(100px);
}
#contents > section:nth-child(even).show .content__item__title {
transform: translateX(0);
}
#contents > section:nth-child(even) .content__item__desc {
transform: translateX(200px);
}
#contents > section:nth-child(even).show .content__item__desc {
transform: translateX(0);
}
#contents > section:nth-child(even) .content__item__imgWrap {
transform: translateX(200px) rotate(30deg) skew(20deg);;
}
#contents > section:nth-child(even).show .content__item__imgWrap {
transform: translateX(0) rotate(0) skew(0);
}
JS 작성
이번 스크립트는 엄청 간단합니다. 재귀함수(무한 함수)를 사용할것인데, 메모리를 적게 차지하는 requestAnimationFrame함수를 이용해 스크롤 때 마다 감지를하며, 스크롤 탑 값이 적정한 위치에 왔을 때 show(클래스)를 추가하는 식을 만들었습니다.
function scroll(){
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.screenTop;
document.querySelectorAll(".content__item").forEach(item => {
if(scrollTop > item.offsetTop - window.innerHeight / 2 ){
item.classList.add("show");
}
})
requestAnimationFrame(scroll); /*1분에 60번 실행하는 무한 함수(재귀함수)지만 메모리 적게 차지한다. */
}
scroll();
'Javascript_Effect' 카테고리의 다른 글
| 슬라이드 이펙트 - 이미지 슬라이드(버튼) (3) | 2022.09.18 |
|---|---|
| 마우스 이펙트 - 마우스 따라다니기(GSAP) (2) | 2022.09.18 |
| 마우스 이펙트 - 마우스 따라다니기 (4) | 2022.09.12 |
| 패럴랙스 이펙트 - 숨김 메뉴 (12) | 2022.09.11 |
| 패럴랙스 이펙트 - 사이드 메뉴 (6) | 2022.09.08 |
댓글