์๋ฐ์คํฌ๋ฆฝํธ : ํจ๋ด๋์ค ํจ๊ณผ : ๋ฆฌ๋น ํจ๊ณผ
์๋ฐ์คํฌ๋ฆฝํธ์ ๋ค์ํ ํจ๊ณผ๋ค ์ค, ํจ๋ด๋์ค ํจ๊ณผ์ ๋๋ค. ์ด๋ฒ์๋ ์คํฌ๋กค์ ๋ด๋ฆด ๋๋ง๋ค ํด๋นํ๋ ์น์ ์ ์ฌ์ง๊ณผ ํ ์คํธ๊ฐ ๋๋ฌ๋๋๋ก ์์ ํด ๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค.
1. HTML
<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 reveal-TWO reveal-BTT">
<div class="content__item__img"></div>
</figure>
<p class="content__item__desc split reveal reveal-TWO reveal-BTT">
๊ฒฐ๊ณผ๋ ์ค์ํ์ง๋ง, ๊ณผ์ ์ ๋ ์ค์ํ๊ฒ ์๊ฐํ๋ค.
</p>
</section>
์ด๋ฒ์ ์์
ํ ๋ฆฌ๋น ํจ๊ณผ๋ ๊ต์ฅํ ๋ณต์กํ๋ฉฐ, HTML, CSS, JAVASCRIPT
์ธ ๊ฐ์ง ์์ค ๋ชจ๋๊ฐ ์ ๋ฌํ ํ๋ชจ๋๋ฅผ ์ด๋ฃจ๊ณ ์์ต๋๋ค. ๊ทธ๋ฌ๋ฏ๋ก ์น์ ํ๊ฒ HTML ์์ค๋ฅผ ์ฝ์
ํ๋, ์ด๊ฒ์ ๋จผ์ ์ดํด๋ณด๋๋ก ํฉ์๋ค.
์น์
์ ๊ฐ์ ๊ตฌ์กฐ๋ก ์ด 9๊ฐ์ง๋ฅผ ๋ง๋ค์ด ์ฃผ์์ต๋๋ค. ๊ฐ๊ฐ์ ์น์
์
๋ฒํธ, ์ด๋ฏธ์ง, ํ
์คํธ๋ก ์ด๋ฃจ์ด์ง๋๋ค. ์์ง์ ํจ๊ณผ๋ reveal ํด๋์ค์ ์์
ํด ์ฃผ์์ต๋๋ค.
์์ ๊ฐ์ด reveal(๊ธฐ๋ณธ), reveal-TWO(๋ฐ์ค ์ถ๊ฐ), reveal-XXX(๋ฐฉํฅ)์ผ๋ก ์น์
๋น ์ต๋ 3๊ฐ์
ํจ๊ณผ๋ฅผ ์ฌ์ฉํ์ฌ ๋ค์ํ ์์ง์ ํจ๊ณผ๋ฅผ ์์
ํด๋ณผ ์์ ์
๋๋ค.
2. CSS
2-1) reveal ํจ๊ณผ ์ด๊ธฐ๊ฐ ์์
.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: #fff;
z-index: 1;
}
.reveal.reveal-TWO::after {
content: "";
position: absolute;
left: 0;
top: 0;
z-index: 1;
height: 100%;
background: rgb(46, 46, 46);
}
์์ํ ๋ํ๋๊ฒ ํ๊ธฐ ์ํด์๋ ์ด๊ธฐ๊ฐ์ผ๋ก opacity: 0์ ์ค์ ํด ์ฃผ์ด์ผ ํฉ๋๋ค.
๋ฆฌ๋น ํจ๊ณผ์ ํต์ฌ์, before ๋ฐ after๋ก ์์ฑํ ๋ฐ์ค๊ฐ ์ง๋๊ฐ๋ ํ์ด๋ฐ์ ๋ง์ถ์ด ์ด๋ฏธ์ง์ ํ
์คํธ๊ฐ ๋๋ฌ๋๋๋ก ํ๋ ๊ฒ์
๋๋ค.
2-2) keyframes ์์ ํ๊ธฐ
@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; top: auto; bottom: 0; }
50% { width: 100%; height: 100%; top: auto; bottom: 0; }
80% { width: 100%; height: 100%; top: auto; bottom: 0; }
100% { width: 100%; height: 0; top: auto; bottom: 100%; }
}
keyframes๋ก ์ ๋๋ฉ์ด์
์ ๋ง๋ค์ด ์ค๋๋ค. ๋ฐ์ค๋ค์ด ์ด๋ฆ๊ฐ์ ํ๋๋ก width, height, ์์น๋ฅผ ์ค์ ํด ์ค๋๋ค. auto๋ ๊ธฐ์กด์ ์์น๊ฐ์ ์ด๊ธฐํํฉ๋๋ค.
reveal์ ๊ฒฝ์ฐ, ๋ฐ์ค๊ฐ ์ผ์ชฝ์์ ์ค๋ฅธ์ชฝ์ผ๋ก ์ง๋๊ฐ๋๋ค.
reveal-RTL(right to left)์ ๊ฒฝ์ฐ, ๋ฐ์ค๊ฐ ์ค๋ฅธ์ชฝ์์ ์ผ์ชฝ์ผ๋ก ์ง๋๊ฐ๋๋ค.
reveal-TTB(top to bottom)์ ๊ฒฝ์ฐ, ๋ฐ์ค๊ฐ ์์ชฝ์์ ์๋์ชฝ์ผ๋ก ์ง๋๊ฐ๋๋ค.
reveal-BTT(bottom to top)์ ๊ฒฝ์ฐ, ๋ฐ์ค๊ฐ ์๋์ชฝ์์ ์์ชฝ์ผ๋ก ์ง๋๊ฐ๋๋ค.
2-3) ์ ๋๋ฉ์ด์ ์ ์ฉํ๊ธฐ
/* 1๊ฐ */
.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; }
์ด์ฌํ ๋ง๋ ์ ๋๋ฉ์ด์ ์ ์ ์ฉํด ์ค๋๋ค. after์ ๊ฒฝ์ฐ, reveal-TWO๋ฅผ ์ ์ฉํ ๊ฒฝ์ฐ ๋ํ๋ฉ๋๋ค. ๋ ๊ฐ์ ๋ฐ์ค๊ฐ 0.3s์ ๋๋ ์ด๋ฅผ ๋๊ณ ์ง๋๊ฐ๋ ํํ์ ๋๋ค.
3. JAVASCRIPT
3-1) ํ ์คํธ span์ผ๋ก ๊ฐ์ธ์ฃผ๊ธฐ
const reveal = document.querySelectorAll(".reveal");
reveal.forEach((el)=>{
let textspan = el.innerText;
if(textspan){
el.innerHTML = '<span>' + textspan + '</span>';
}
})
๋จผ์ , ํ ์ผ์ด ์์ต๋๋ค. ์์ HTML์ ์ดํด๋ณด๋ฉด,
ํ
์คํธ๊ฐ p ํ๊ทธ์ ์ํด์๋ ๊ฒ์ ์ ์ ์์ต๋๋ค. ์ ๋๋ฉ์ด์
์ ์ ์ฉํด์ฃผ๊ธฐ ์ํด,
p ํ๊ทธ ์์ ์๋ ํ
์คํธ๋ฅผ span ํ๊ทธ๋ก ๊ฐ์ธ์ฃผ๊ธฐ๋ก ํฉ๋๋ค.
reveal ์ ํ์๋ ๋ชจ๋ p ํ๊ทธ๋ฅผ ๊ฐ๋ฆฌํต๋๋ค. innerText๋ฅผ ํ์ฉํ์ฌ ๊ฐ๊ฐ์ p ํ๊ทธ ์์ ํ
์คํธ๊ฐ ์๋์ง ๋จผ์ ํ์ธํด ๋ด
๋๋ค.
ํ
์คํธ๊ฐ ์๋ค๋ฉด, if๋ฌธ์ด ์คํ๋์ด span ์ท์ ์
ํ์ค ๊ฒ์
๋๋ค.
3-2) scroll ์ด๋ฒคํธ ๋ง๋ค์ด ์ฃผ๊ธฐ
function scroll() {
let scrollTop = window.scrollY;
document.querySelector(".scroll span").innerHTML = Math.round(scrollTop);
requestAnimationFrame(scroll);
}
scroll();
ํ
์คํธ๋ค์ด ๋ฐ๋ปํด์ก๋ค๋ฉด ์ด์ ์คํฌ๋กค ์ด๋ฒคํธ๋ฅผ ๋ง๋ค์ด ์ค๋๋ค. ์๋์ ๋ชจ๋ ์์
๋ค์ ์คํฌ๋กค ์ด๋ฒคํธ ๋ด์์ ์ด๋ฃจ์ด์ง๋๋ค.
์ด์ scroll๊ฐ์ ๊ตฌํด ์ถ๋ ฅํ๋ ๊ฒ์ ๊ป์
๋๋ค. request ์ด์ฉ๊ตฌ๋ฅผ ์ฌ์ฉํ๋ ์ด์ ๋ ๋ชจ๋ ์๋๋ค.
3-3) ํจ๋ด๋์ค ํจ๊ณผ ์์ ํ๊ธฐ
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);
}
}
})
์ง๋ ํจ๊ณผ์์๋ transitionDelay๋ก ๋๋ ์ด ์์ฑ์ ๋ถ์ฌํด ์ฃผ์์ง๋ง, ์ด๋ฒ์๋ show ํด๋์ค๋ฅผ ์ถ๊ฐ, ์ ๊ฑฐํจ์ผ๋ก์จ
์์ฑ์ ๋ถ์ฌํ๊ธฐ๋ก ํฉ๋๋ค. transition์ ์ฌ์ฉํ๋ฉด ์๋ฐ์คํฌ๋ฆฝํธ์์ css๋ฅผ ์ผ์ผ์ด ํด์ํด์ผ ํฉ๋๋ค. ๊ทธ๋ฌ๋ classList๋ฅผ ์ฌ์ฉํ์ฌ
ํด๋นํ๋ ํด๋์ค๋ฅผ ๋ถ์ฌํด์ฃผ๊ธฐ๋ง ํ๋ฉด ๋ฒ๋ฒ
๊ฑฐ๋ฆผ์ ์ต์ํํ ์ ์์ต๋๋ค. ๋ด ์ผ์ ๋จ์๊ฒ ๋ ๋๊ธฐ์ง ๋ง์๋ค์.
๋, revealDelay ์ ํ์๋ data-delay ์์ฑ์ ๋ถ์ฌํ HTML ํ๊ทธ๋ฅผ ๊ฐ๋ฆฌํต๋๋ค.
setTimeout ํจ์๋ฅผ ๋ง๋ค๊ณ , ์๊ฐ์ revealDelay ๊ฐ์ผ๋ก ์ค์ ํ๋ฉด, ์์ฝ๊ฒ ์ํ๋ ๊ฐ๋งํผ ๋๋ ์ด๋ฅผ ๋ถ์ฌํ ์ ์์ต๋๋ค.
๊ฒฐ๊ณผ
ํจ๋ด๋์ค๊ฐ ์ฌ์ด ํธ์ด๋ผ ์ข์ํ๋๋ฐ... ์ด๊ฑด ์ข ์ ๋จ์ด์ง๋ค์...
'Javascript Effect' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
์๋ฐ์คํฌ๋ฆฝํธ : ๊ฒ์ ํจ๊ณผ : ๋ฎค์ง ํ๋ ์ด์ด (1) | 2022.10.18 |
---|---|
์๋ฐ์คํฌ๋ฆฝํธ : ๊ฒ์ ํจ๊ณผ : sort(), reverse() (0) | 2022.10.18 |
์๋ฐ์คํฌ๋ฆฝํธ ๊ฒ์ ํจ๊ณผ : filter() (4) | 2022.09.29 |
์๋ฐ์คํฌ๋ฆฝํธ ํจ๋ด๋์ค ํจ๊ณผ : ํ ์คํธ ํจ๊ณผ (2) | 2022.09.29 |
์๋ฐ์คํฌ๋ฆฝํธ ๋ง์ฐ์ค ํจ๊ณผ : ํ ์คํธ ํจ๊ณผ (5) | 2022.09.29 |
๋๊ธ