패럴렉스 이펙트_07
각 span태그가 감싸여있지 않은 문장들을 span태그로 감싸 각 이미지와 span태그에 after/before 요소를 통해 효과를 주도록 해보겠습니다 👩🏻💻
HTML 코드
HTML 코드는 크게 신경쓸것이 없으나,
각 desc에 data-delay를 추가시켜 각 애니메이션에 딜레이를 줄겁니다!🏄♂️
<main id="parallax__cont">
<div id="contents">
<!-- section1 시작 -->
<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 reveal">
<div class="content__item__img"></div>
</figure>
<p class="content__item__desc reveal">우리는 사랑하는 친구들에 의해서만 알려진다.</p>
</section>
<!-- section1 끝 -->
<!-- section2 시작 -->
<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 reveal reveal-RTL">
<div class="content__item__img"></div>
</figure>
<p class="content__item__desc reveal reveal-RTL" data-delay="500">사랑은 눈으로 보지 않고 마음으로 보는 거지.</p>
</section>
<!-- section2 끝 -->
<!-- section3 시작 -->
<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 reveal reveal-TTB">
<div class="content__item__img"></div>
</figure>
<p class="content__item__desc reveal reveal-TTB" data-delay="500">두 분은 상처 하나 입지 않고, 대용사가 된 셈이오.</p>
</section>
<!-- section3 끝 -->
<!-- section4 시작 -->
<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 reveal reveal-BTT" data-delay="1500">
<div class="content__item__img" data-delay="1500"></div>
</figure>
<p class="content__item__desc reveal reveal-BTT">그의 믿음은 그가 쓰는 모자의 유행처럼 변한다.</p>
</section>
<!-- section4 끝 -->
<!-- section5 시작 -->
<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 reveal reveal-TWO">
<div class="content__item__img"></div>
</figure>
<p class="content__item__desc reveal reveal-TWO">잘 있거라! 우리가 언제 다시 만날지는 아무도 모른다.</p>
</section>
<!-- section5 끝 -->
<!-- section6 시작 -->
<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 reveal reveal-TWO reveal-RTL">
<div class="content__item__img"></div>
</figure>
<p class="content__item__desc reveal reveal-TWO reveal-RTL">죄를 짓고 잘되는 사람도 있고, 덕을 베풀고 망하는 사람도 있다.</p>
</section>
<!-- section6 끝 -->
<!-- section7 시작 -->
<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 reveal reveal-TWO reveal-TTB">
<div class="content__item__img"></div>
</figure>
<p class="content__item__desc reveal reveal-TWO reveal-TTB">모두를 사랑하되, 몇 사람만 믿으라. 누구에게도 잘못을 저지르지 말라.</p>
</section>
<!-- section7 끝 -->
<!-- section8 시작 -->
<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 reveal reveal-TWO reveal-TTB">
<div class="content__item__img"></div>
</figure>
<p class="content__item__desc reveal reveal-TWO reveal-TTB">누구에게나 결점은 있기 마련이지. 그분의 경우는 솔직하다는 게 결점이야.</p>
</section>
<!-- section8 끝 -->
<!-- section9 시작 -->
<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 reveal reveal-TWO reveal-BTT">
<div class="content__item__img"></div>
</figure>
<p class="content__item__desc reveal reveal-TWO reveal-TTB">사람은 누구나 주어진 일과 원하는 것이 있다, 비록 보잘 것 없을 지라도.</p>
</section>
<!-- section9 끝 -->
</div>
</main>
CSS 코드 : 애니메이션
총 5가지(opacity/reveal/reveal-RTL/reveal-TTB/reveal-BTT)의 애니메이션을 사용하였습니다.
또한 각각의 애니메이션은 속성을 변경해줌으로써 0%~100%까지의 크기 변경 과정을 보여주도록 하였으며
일부 속성은 기본값을 사용하기 위해 'auto'를 지정해 변경값을 초기화 해주었습니다 👀
@keyframes opacity{
0% {opacity: 0;}
60% {opacity: 0;}
70% {opacity: 1;}
100% {opacity: 1;}
}
@keyframes reveal{
0% {width: 0; left: 0;}
50% {width: 100%; left: 0;}
80% {width: 100%; left: 0;}
100% {width: 0; left: 100%;}
}
@keyframes reveal-RTL{
0% {width: 0; right: 0; left: auto;}
50% {width: 100%; right: 0; left: auto;}
80% {width: 100%; right: 0; left: auto;}
100% {width: 0; right: 100%; left: auto;}
}
@keyframes reveal-TTB{
0% {width: 100%; height: 0; top: 0;}
50% {width: 100%; height: 100%; top: 0;}
80% {width: 100%; height: 100%; top: 0;}
100% {width: 100%; height: 0; top: 100%;}
}
@keyframes reveal-BTT{
0% {width: 100%; height: 0; bottom: 0; top:auto;}
50% {width: 100%; height: 100%; bottom: 0; top:auto;}
80% {width: 100%; height: 100%; bottom: 0; top:auto;}
100% {width: 100%; height: 0; bottom: 100%; top:auto;}
}
.reveal > div, .reveal > span {
opacity: 0;
}
.reveal.show > div,.reveal.show > span {
animation: opacity 1s linear forwards;
}
.reveal {
position: relative;
}
.reveal::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 0;
height: 100%;
background-color: rgba(255, 255, 255, 0.527);
backdrop-filter: blur(15px);
z-index: 1;
}
.reveal.reveal-TWO::after{
content: '';
position: absolute;
left: 0;
top: 0;
width: 0;
height: 100%;
z-index: 1;
background-color: rgba(255, 255, 255, 0.445);
backdrop-filter: blur(15px);
}
.reveal.show::before{
animation: reveal 1s;
}
.reveal.reveal-RTL.show::before{
animation: reveal-RTL 1s;
}
.reveal.reveal-TTB.show::before{
animation: reveal-TTB 1s;
}
.reveal.reveal-BTT.show::before{
animation: reveal-BTT 1s;
}
/* 2개 */
.reveal.show::after{
animation: reveal 1s 0.3s;
}
.reveal.reveal-RTL.show::after{
animation: reveal-RTL 1s 0.3s;
}
.reveal.reveal-TTB.show::after{
animation: reveal-TTB 1s 0.3s;
}
.reveal.reveal-BTT.show::after{
animation: reveal-BTT 1s 0.3s;
}
JS 코드 : split 기준으로 한글자씩 span으로 감싸주기!
//reveal이 붙었을때 한문장씩 span태그가 없는 문장들은 span태그를 붙여줍니다.
1. .content__item__desc에 reveal이 붙었을때의 상태만을 다중으로 선택 후 해당 요소를 forEach를 통해 추출합니다.
2. 각 꺼낸 요소를 .innerText로 문자열로 변환 후 splitText라는 변수안에 넣고
3. "<span aria-hidden='true'>" + splitWrap + "</span>";를 통해 splitText 양쪽에 span 태그를 열고 닫는 태그를 넣어줍니다.
5. splitText을 각 뽑아낸 요소에 innerHTML로 넣습니다~
//스크롤시 딜레이를 걸어 show를 붙여주는 원리
0. revealDelay 에는 el.dataset.delay(각 요소의 data-delay여부)를 넣어주고
1. 만약 revealDelay(data-delay 여부)가 찾을 수 없음과 같다면
2. 각 요소에 show 클래스를 붙여주고
3. 만약 찾을 수 있다면 각 요소는 setTimeout에 revealDelay(data-delay 여부)초 만큼 딜레이 후 show를 붙여줍니다.
document.querySelectorAll(".content__item__desc.reveal").forEach(text => {
let splitText = text.innerHTML;
splitText = "<span>" + splitText + "</span>";
text.innerHTML = splitText;
})
//reveal 클래스 자식에 글씨만 있다면, 가상으로 span 태그를 만들어서 넣어주세요
function scroll(){
let scrollTop = window.scrollY;
const reveal = document.querySelectorAll(".reveal");
reveal.forEach(el => {
let revealOffset = el.offsetTop + el.parentElement.offsetTop;
let revealDelay = el.dataset.delay;
if(scrollTop >= revealOffset - window.innerHeight){
if(revealDelay == undefined){
el.classList.add("show");
} else {
setTimeout(() => {
el.classList.add("show");
}, revealDelay)
}
}
})
requestAnimationFrame(scroll);
}
scroll();
결과
느무느무 믓즈인~~~~~ 패럴렉스 이펙트 07번 완승~~~💃🏻
'JS 응용하기' 카테고리의 다른 글
슬라이드 이펙트 06 (1) | 2022.10.21 |
---|---|
슬라이드 이펙트 07 (2) | 2022.10.21 |
패럴렉스 이펙트_06 : 각 글자마다 효과주기 ✨ (1) | 2022.10.07 |
마우스 이펙트_06 : 좌표에 따라 텍스트를 움직이고 포인터에 변화주기! (5) | 2022.09.29 |
패럴렉스 이펙트_06 : 스크롤 값에 따라 텍스트를 순차적으로 나오게 하기 (2) | 2022.09.29 |
댓글