Tutorial/webd
GSAP 패럴랙스 이펙트 : 배경색 효과
소개
안녕하세요! 웹스토리보이입니다. 이번시간에는 배경색을 자연스럽게 변경하는 애니메이션을 만들어보겠습니다. 방법은 두가지로 설정할 수 있습니다. 자연스럽게 전체 배경에 색을 넣는 과정과, 해당 섹션의 data값을 이용해 섹션마다 변경하는 방법입니다. 어떤 방법이든 자연스럽게 배경색을 변경할 수 있습니다. 그럼 시작해볼까요? 😘
1. 기본 구조 만들기
1-1. 준비하기
GSAP를 배우는 시간이기 때문에 HTML/CSS 코딩은 생략하겠습니다. 기본 코딩은 복사해서 사용하겠습니다. 우선 웹폰트를 설정하고 GSAP에서 필요한 파일을 미리 셋팅해 놓겠습니다. GSAP는 자주 업데이트가 되기 때문에 제일 최선 버전을 사용하는게 좋습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GSAP Scroll Effect</title>
<!-- 웹폰트 설정 -->
<link href="https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css" rel="stylesheet">
</head>
<body>
<!-- GSAP 라이브러리 설정 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.1/ScrollToPlugin.min.js"></script>
</body>
</html>
1-2. 기본 셋팅하기
소스는 그대로 복사해서 사용하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GSAP Scroll Effect</title>
<link href="https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@100&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
}
a {
color: #fff;
text-decoration: none;
}
body {
--bg-color : #222;
background-color: var(--bg-color);
color: #fff;
font-family: "NexonLv1Gothic";
font-weight: 300;
}
#parallax__title {
position: fixed;
left: 20px;
top: 20px;
z-index: 1000;
}
#parallax__title h1 {
font-size: 30px;
border-bottom: 1px dashed #fff;
margin-bottom: 10px;
padding-bottom: 5px;
font-weight: 400;
display: inline-block;
}
#parallax__title p {
font-size: 16px;
}
#parallax__title ul {
margin-top: 10px;
}
#parallax__title li {
display: inline;
}
#parallax__title li a {
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px dashed #fff;
display: inline-block;
text-align: center;
line-height: 20px;
font-size: 12px;
}
#parallax__title li.active a {
background: #fff;
color: #000;
}
/* parallax__cont */
#parallax__cont {
width: 100%;
}
.parallax__item {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.parallax__item__num {
position: absolute;
right: 20px;
bottom: 20px;
font-size: 1vw;
}
.parallax__item__imgWrap {
width: 50%;
margin-right: 30%;
padding-bottom: 26.25%;
background: #000;
position: relative;
overflow: hidden;
}
.parallax__item__img {
position: absolute;
left: -5%;
top: -5%;
width: 110%;
height: 110%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
filter: saturate(0%);
transition: all 1s;
}
.parallax__item__img:hover {
filter: saturate(100%);
transform: scale(1.025);
}
.parallax__item__desc {
font-size: 3vw;
line-height: 1.4;
margin-top: 10vw;
margin-left: -4vw;
margin-right: 2vw;
z-index: 100;
position: absolute;
left: 50%;
top: 50%;
word-break: keep-all;
}
#section1 .parallax__item__img {
background-image: url(assets/img/images01@2.jpg);
}
#section2 .parallax__item__img {
background-image: url(assets/img/images02@2.jpg);
}
#section3 .parallax__item__img {
background-image: url(assets/img/images03@2.jpg);
}
#section4 .parallax__item__img {
background-image: url(assets/img/images04@2.jpg);
}
#section5 .parallax__item__img {
background-image: url(assets/img/images05@2.jpg);
}
#section6 .parallax__item__img {
background-image: url(assets/img/images06@2.jpg);
}
#section7 .parallax__item__img {
background-image: url(assets/img/images07@2.jpg);
}
#section8 .parallax__item__img {
background-image: url(assets/img/images08@2.jpg);
}
#section9 .parallax__item__img {
background-image: url(assets/img/images09@2.jpg);
}
</style>
</head>
<body>
<header id="parallax__title">
<h1>GSAP Parallax Effect07</h1>
<p>GSAP scrollTrigger - 배경색 효과</p>
<ul>
<li><a href="gsap01.html">1</a></li>
<li><a href="gsap02.html">2</a></li>
<li><a href="gsap03.html">3</a></li>
<li><a href="gsap04.html">4</a></li>
<li><a href="gsap05.html">5</a></li>
<li><a href="gsap06.html">6</a></li>
<li class="active"><a href="gsap07.html">7</a></li>
<li><a href="gsap08.html">8</a></li>
<li><a href="gsap09.html">9</a></li>
<li><a href="gsap10.html">10</a></li>
<li><a href="gsap11.html">11</a></li>
<li><a href="gsap12.html">12</a></li>
<li><a href="gsap13.html">13</a></li>
<li><a href="gsap14.html">14</a></li>
<li><a href="gsap15.html">15</a></li>
</ul>
</header>
<!-- //parallax__title -->
<main id="parallax__cont">
<section id="section1" class="parallax__item" data-bgcolor="#111111">
<span class="parallax__item__num">01</span>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">높은 목표를 세우고, 스스로 채찍질 한다.</p>
</section>
<!-- //section1 -->
<section id="section2" class="parallax__item" data-bgcolor="#593b22">
<span class="parallax__item__num">02</span>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">결과도 중요하지만, 과정을 더 중요하게 생각한다.</p>
</section>
<!-- //section2 -->
<section id="section3" class="parallax__item" data-bgcolor="#245922">
<span class="parallax__item__num">03</span>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">매 순간에 최선을 다하고, 끊임없이 변화한다.</p>
</section>
<!-- //section3 -->
<section id="section4" class="parallax__item" data-bgcolor="#243859">
<span class="parallax__item__num">04</span>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">모든 일에는 기본을 중요하게 생각한다.</p>
</section>
<!-- //section4 -->
<section id="section5" class="parallax__item" data-bgcolor="#3f2459">
<span class="parallax__item__num">05</span>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">열정을 잃지 않고 실패에서 실패로 걸어가는 것이 성공이다.</p>
</section>
<!-- //section5 -->
<section id="section6" class="parallax__item" data-bgcolor="#59243c">
<span class="parallax__item__num">06</span>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">천 마디 말보단 하나의 행동이 더 값지다.</p>
</section>
<!-- //section6 -->
<section id="section7" class="parallax__item" data-bgcolor="#3f2459">
<span class="parallax__item__num">07</span>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">조그만 성공에 만족하지 않으며, 방심을 경계한다.</p>
</section>
<!-- //section7 -->
<section id="section8" class="parallax__item" data-bgcolor="#222222">
<span class="parallax__item__num">08</span>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">나는 내가 더 노력할수록 운이 더 좋아진다는 걸 발견했다.</p>
</section>
<!-- //section8 -->
<section id="section9" class="parallax__item" data-bgcolor="#592624">
<span class="parallax__item__num">09</span>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">꿈이 있다면, 그 꿈을 잡고 절대 놓아주지마라.</p>
</section>
<!-- //section9 -->
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.1/ScrollToPlugin.min.js"></script>
<script>
</script>
</body>
</html>2. 스크립트 작업하기
2-1. 전체 배경 변경하기
전체 배경에 색을 변경하기 위해서 CSS 변수를 사용하였습니다. body 태그에 배경색을 변수에 값을 넣었습니다. CSS에서 변수를 설정하는 것은 --로 표현하고 불러올 때에는 var() 이렇게 사용합니다. gsap timeline을 사용하여 배경색을 변경하겠습니다. scrollTrigger의 시작값과 끝나는 값을 설정합니다. 끝나는 값에는 max 속성 값을 설정할 수 있습니다. 이렇게 하고 원하는 배경색을 to() 메서드에 설정하면 배경색은 자연스럽게 변경됩니다.
body {
--bg-color : #222;
background-color: var(--bg-color);
}let bg = gsap.timeline({
scrollTrigger: {
start: 0,
end: "max",
scrub: true
}
});
bg.to("body", {"--bg-color": "red"})
.to("body", {"--bg-color": "green"})
.to("body", {"--bg-color": "blue"});
2-2. data 값으로 변경하기
이번에는 섹션별로 배경색을 변경해보겠습니다. 섹션별로 data-bgcolor을 설정하여, 값을 불러와 변경하겠습니다. 꼭 섹션별로 색이 있을 필요는 없습니다. 다중 선택이기 때문에 gsap.utils.toArray와 forEach()를 사용했습니다. 이번에는 ScrollTrigger.create를 생성하여 트리거와 시작값, 끝나는 값을 설정합니다. 콜백 함수를 사용하여 onEnter와 onEnterBack를 설정하면 배경색은 자연스럽게 변경됩니다. 배경색 속도 조절은 duration으로 설정하면 됩니다.
gsap.utils.toArray(".parallax__item").forEach((item) => {
let color = item.getAttribute("data-bgcolor");
ScrollTrigger.create({
trigger: item,
start: "top 50%",
end: "bottom 5%",
markers: true,
onEnter: () => gsap.to("body", {
backgroundColor: color,
duration: 1.4
}),
onEnterBack: () => gsap.to("body", {
backgroundColor: color,
duration: 1.4
}),
});
});
3. 마무리
이번에는 비교적 간단하게 끝났습니다. 자바스크립트로 작업하면 복잡하고 자연스럽지 않은데, GSAP를 이용하면 자연스럽게 변경할 수 있습니다. 포트포리오 만들때 많이 활용하면 좋겠네요! 이상한 점이나 버그 있으면 언제나 댓글 부탁드립니다. 감사합니다. 수고하셨습니다. 🥲
예제 목록
- 1. GSAP 패럴랙스 이펙트 : 기본 애니메이션
- 2. GSAP 패럴랙스 이펙트 : Pin 애니메이션
- 3. GSAP 패럴랙스 이펙트 : Pin 배경 고정하기
- 4. GSAP 패럴랙스 이펙트 : 이질감 효과
- 5. GSAP 패럴랙스 이펙트 : 나타나기 효과
- 6. GSAP 패럴랙스 이펙트 : 텍스트 효과
- 7. GSAP 패럴랙스 이펙트 : 배경색 효과
- 8. GSAP 패럴랙스 이펙트 : 진행바 효과
- 9. GSAP 패럴랙스 이펙트 : 메뉴 이동 효과
- 10. GSAP 패럴랙스 이펙트 : 메뉴 축소 효과
- 11. GSAP 패럴랙스 이펙트 : 메뉴 숨기기 효과
- 12. GSAP 패럴랙스 이펙트 : 가로 효과
- 13. GSAP 패럴랙스 이펙트 : 가로/세로 효과
- 14. GSAP 패럴랙스 이펙트 : 가로/세로 나타나기 효과
- 15. GSAP 패럴랙스 이펙트 : 스무스 효과
댓글