클릭
버튼을 클릭하면 명언이 나와요
-이름이 나와요
이번에 배운 패럴렉스 효과는 글씨가 밑에서부터 위로 올라옵니다.
그리고 글씨가 위로 올라올떄 몇몇 글씨는 시간차를 주어서
나중에 나오게 했습니다.
HTML코드
<main id="main">
<div id="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">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc split style1">성공은 준비된 기회와 만나는 것이다. 훌륭한 기회가 없다면, 자신의 능력을 끌어내는 기회를 만들어야 한다.</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">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc split style2">자신을 믿고 당당하게 꿈을 향해 나아가라. 당신이 믿는다면, 누구나 당신을 믿게 될 것이다.</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">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc split style3">가장 큰 위험은 위험을 감수하지 않는 것이다. 더 나은 미래를 향해 나아가려면 불확실성과 위험을 감수하며 도전해야 한다.</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">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc split style4">최선을 다하고 실패하더라도, 실패하는 것보다 아무것도 하지 않는 것이 훨씬 더 낫다.</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">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc split style5">어려움 속에서도 희망을 잃지 말라. 어둠이 깊을수록 빛이 더 빛나기 때문이다.</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">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc split style6">성공은 결코 최종목표가 아니라, 실패와 일시적인 패배에도 불구하고 계속해서 나아가는 끈기와 인내의 과정이다.</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">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc split">어제의 꿈은 오늘의 희망이 되고, 오늘의 희망은 내일의 성취가 된다.</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">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc split">삶이 있는 한 희망은 있다. 그리고 희망이 있는 한 기회는 있다."</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">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc split">최선을 다하고 실패하더라도, 실패하는 것보다 아무것도 하지 않는 것이 훨씬 더 낫다.</p>
</section>
<!-- //section9 -->
</div>
</main>
<!-- //main -->
CSS코드
<style>
/* gsap */
.split {
transform-style: preserve-3d;
}
.split span {
display: inline-block;
min-width: 1vw;
opacity: 0;
transform: translate3d(-100px, -150px, 30px) scale(300deg) rotate(200deg);
}
</style>CSS에서는 글씨들 위치만 따로 옮겨주고 자바스크립트에서 GSAP을 이용해서 원래의 위치로 돌아가게 했습니다.
그래서 CSS에는 코드가 transform외에는 중요한게 없네요.
JAVASCRIPT코드
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
// 모든 텍스트 분리하기
let text = document.querySelectorAll("section .parallax__item__desc");
text.forEach((item, index) => {
let splitText = text[index].innerText;
let splitWrap = splitText.split("").join("</span><span aria-hidden='true'>");
text[index].innerHTML = splitWrap = "<span aria-hidden='true'>" + splitWrap + "</span>";
text[index].setAttribute("aria-label", splitText);
});
// 스크롤 이펙트
function scroll(){
let scrollTop = window.pageYOffset || window.scrollY;
const items = document.querySelectorAll(".parallax__item");
items.forEach((item, itemIndex) => {
if (scrollTop >= item.offsetTop) {
const spans = item.querySelectorAll(".split span");
gsap.to(spans, { duration: 0.1, opacity:1, x:0, y:0, z:0, scale:1, rotation:0, stagger: 0.05 });
}
});
// 1초마다 실행 됨
requestAnimationFrame(scroll);
}
scroll();
</script>1. 이번 패럴렉스 6번은 GSAP을 이용해서 만들었습니다.
(<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>)
2. let text = document.querySelectorAll("section .parallax__item__desc");
(클래스를 찾습니다.)
3.text.forEach((item, index) => {});은 div태그 .parallax__item__desc에 있는 글자 하나하나에 span태그를 줍니다.
4.function scroll(){}은 브라우저의 좌표값을 가져와서 이벤트 효과를 부여합니다.
그리고 GSAP을 통해서 해당 값들을 초기화를 해줍니다.
(CSS에 설정된 값들이 if문 조건이 맞으면 값들을 초기화 시킴으로써 애니메이션 효과를 보여줍니다.)
5.requestAnimationFrame(scroll); 은 1초마다 실행됩니다.
(scroll함수를 1초마다 실행 중입니다.)