“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
자바스크립트 패럴랙스 리빌 효과
💜 parallax Effect07
<main id="main">
<div class="parallax__wrap">
<section id="section1" class="parallax__item">
<span class="parallax__item__num">01</span>
<h2 class="parallax__item__title">Section1</h2>
<figure class="parallax__item__imgWrap reveal">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc reveal" data-delay="1500">네가 믿을 수 있다면, 넌 이미 반 이긴 것이다.</p>
</section>
<!-- //section1 -->
<section id="section2" class="parallax__item">
<span class="parallax__item__num">02</span>
<h2 class="parallax__item__title">Section2</h2>
<figure class="parallax__item__imgWrap reveal">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc reveal" data-delay="1500">성공의 비결은 시작하는 것이다.</p>
</section>
<!-- //section2 -->
<section id="section3" class="parallax__item">
<span class="parallax__item__num">03</span>
<h2 class="parallax__item__title">Section3</h2>
<figure class="parallax__item__imgWrap reveal reveal-RTL">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc split reveal reveal-RTL" data-delay="1500">불가능은 무엇인가? 단지 미래의 가능성을 아직 발견하지 못한 것일 뿐이다.</p>
</section>
<!-- //section3 -->
<section id="section4" class="parallax__item">
<span class="parallax__item__num">04</span>
<h2 class="parallax__item__title">Section4</h2>
<figure class="parallax__item__imgWrap reveal reveal-TTB">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc split reveal reveal-TTB" data-delay="1500">계획이 없다면 실패를 계획한 것이다.</p>
</section>
<!-- //section4 -->
<section id="section5" class="parallax__item">
<span class="parallax__item__num">05</span>
<h2 class="parallax__item__title">Section5</h2>
<figure class="parallax__item__imgWrap reveal reveal-BTT">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc split reveal reveal-BTT" data-delay="1500">내일의 나를 더 나은 사람으로 만들기 위해 오늘 노력하라.</p>
</section>
<!-- //section5 -->
<section id="section6" class="parallax__item">
<span class="parallax__item__num">06</span>
<h2 class="parallax__item__title">Section6</h2>
<figure class="parallax__item__imgWrap reveal reveal-TWO">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc split reveal reveal-TWO" data-delay="1500">기회는 문을 두드리지 않는다. 우리가 문을 열어야 한다.</p>
</section>
<!-- //section6 -->
<section id="section7" class="parallax__item">
<span class="parallax__item__num">07</span>
<h2 class="parallax__item__title">Section7</h2>
<figure class="parallax__item__imgWrap reveal reveal-TWO reveal-RTL">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc split reveal reveal-TWO reveal-RTL" data-delay="1500">성공은 무엇보다 인내와 노력을 요구한다.</p>
</section>
<!-- //section7 -->
<section id="section8" class="parallax__item">
<span class="parallax__item__num">08</span>
<h2 class="parallax__item__title">Section8</h2>
<figure class="parallax__item__imgWrap reveal reveal-TWO reveal-TTB">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc split reveal reveal-TWO reveal-TTB" data-delay="1500">어려움은 성장의 씨앗이다.</p>
</section>
<!-- //section8 -->
<section id="section9" class="parallax__item">
<span class="parallax__item__num">09</span>
<h2 class="parallax__item__title">Section9</h2>
<figure class="parallax__item__imgWrap reveal reveal-TWO reveal-BTT">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc split reveal reveal-TWO reveal-BTT" data-delay="1500">가장 큰 모험은, 우리가 꿈꾸는 세상을 만들기 위한 모험이다.
</p>
</section>
<!-- //section9 -->
</div>
</main>
<!-- //main -->
<aside class="parallax__info">
<div class="scroll">scrollTop : <span>0</span>ps</div>
</aside>
<!-- parallax__info -->섹션별로 나눠놓은 이미지와 글씨에 효과를 적용했습니다.
.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: #fff;
z-index: 1;
}
.reveal.reveal-TWO::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 0%;
height: 100%;
z-index: 1;
background-color: #b0f074;
}
/* 1개 */
.reveal.show::before {
animation: reveal 1s ease-in-out;
}
.reveal.reveal-RTL.show::before {
animation: reveal-RTL 1s ease-in-out;
}
.reveal.reveal-TTB.show::before {
animation: reveal-TTB 1s ease-in-out;
}
.reveal.reveal-BTT.show::before {
animation: reveal-BTT 1s ease-in-out;
}
/* 2게 */
.reveal.show::after {
animation: reveal 1s 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.reveal.reveal-RTL.show::after {
animation: reveal-RTL 1s 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.reveal.reveal-TTB.show::after {
animation: reveal-TTB 1s 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.reveal.reveal-BTT.show::after {
animation: reveal-BTT 1s 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
/* animation */
@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;
left: auto;
right: 0;
}
50% {
width: 100%;
left: auto;
right: 0;
}
80% {
width: 100%;
left: auto;
right: 0;
}
100% {
width: 0;
left: auto;
right: 100%;
}
}
@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;
}
}
.parallax__item__num,
.parallax__item__title {
display: none;
}css로 이름을 지정해 스타일을 준 후
그 값을 HTML에 붙여넣어 바로바로 style을 적용시킬 수 있게 작업해줬습니다.
이미지와 글씨가 스타일에 맞게 나타나게 해줬습니다.
reveal은 요소가 가로로 나타나서 화면 왼쪽에서 오른쪽으로 사라지는 효과
revea-_RTL 요소가 가로로 나타나서 화면 오른쪽에서 왼쪽으로 사라지는 효과
reveal-TTB 요소가 세로로 나타나서 화면 위에서 아래로 사라지는 효과
reveal-BTT 요소가 세로로 나타나서 화면 아래에서 위로 사라지는 효과를 줬습니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
//만약에 reveal 클래스를 추가하면 자식요소에 span으로 깜싸주기
document.querySelectorAll("p.reveal").forEach(text => {
text.innerHTML = `<span>${text.innerHTML}</span>`;
});
function scroll() {
let scrollTop = window.scrollY || window.pageYOffset;
const reveals = document.querySelectorAll(".reveal");
reveals.forEach(reveal => {
let revealOffset = reveal.offsetTop + reveal.parentElement.offsetTop;
let revealDelay = reveal.dataset.delay;
console.log(revealDelay);
// if (scrollTop >= revealOffset - window.innerHeight) {
// reveal.classList.add("show");
// }
if (scrollTop >= revealOffset - window.innerHeight) {
if (revealDelay == undefined) {
reveal.classList.add("show");
} else {
setTimeout(() => {
reveal.classList.add("show");
}, revealDelay)
}
}
})
document.querySelector(".scroll span").innerText = Math.round(scrollTop);
requestAnimationFrame(scroll);
}
scroll();
</script>reveal 클래스를 가진 p 요소들을 선택하고, 각 요소의 내용을 span요소로 감싸는 작업을 수행합니다.
그 다음 scroll함수 정의
이 함수는 스크롤 이벤트가 발생할 때마다 호출되며, 화면의 스크롤 위치를 확인하여 reveal 클래스가 적용된 요소들을 제어
scrollTop에 현재 스크롤 위치를 저장하고
receals 변수에 reveal 클래스를 가진 모든 요소를 선택합니다.
reveals.forEach()reveal=>{})코드는 각 reveal 요소에 대해 반복적으로 동작하고
각 reveal 요소의 위치 ('revealOffset') 와 지연 시간 ('revealDelay')을 계산하고, 스크롤 위치왕 비교하여 요소를 제어합니다.
recealDelay 가 정의되어 있다면 setTimeout 함수를 사용해 해당 시간만큼 대기한 후 reveal 요소에 show 클래스를 추가합니다.
그렇지 않으면 바로 show 클래스를 추가
scroll 함수가 호출될 때마다 현재 스크롤 위치를 표시하는 span 요소의 내용을 업데이트 합니다.
반응형