🔍 Project Overview
사이트명 : 더 글로리
작업기간 : 4일
라이브러리 : jQuery, gsap
유형 : 반응형, 리뉴얼
✅ Check Point
- GSAP
- scss
📚 Learning Point
- 사운드 재생/정지
- GSAP scrollTrigger 애니메이션
GSAP이란?
The GreenSock Animation Platform (줄여서 GSAP)는 웹 화면에 쉽게 사용할 수 있는 강력한 타임라인 기반의 애니메이션 자바스크립트 라이브러리이다.
CSS와 바닐라 자바스크립트만으로도 동적인 화면을 만들 수 있지만 GSAP은 세밀한 움직임과 동작의 연속성을 훨씬 간편하게 설정할 수 있다.
GSAP을 사용하기 위해선 GSAP 공식 사이트에서 다운로드하거나 CDN으로 적용하거나 혹은 npm install gsap로 설치할 수 있다.
scss
SASS와 SCSS는 CSS를 편리하게 사용할 수 있도록 하며 추가 기능 또한 있는 확장판 스크립트 언어이다.
- SCSS는 **Sass 3 버전부터 새롭게 등장했다.
- SCSS는 Sass의 모든 기능을 지원하는 Superset이다.
게다가 SCSS는 CSS와 거의 비슷한 문법으로 Sass의 기능을 사용할 수 있어 편리하다.
**Sass (Synthetically Awesome StyleSheets)
Sass는 CSS 전처리기(CSS Preprocessor)로써, 변수, 상속, 혼합, 중첩 등의 다양한 기능을 제공한다.
전처리기로 작성한 코드는 CSS로 컴파일을 거친 뒤 실행시킬 수 있다.
🔹 Sass와 SCSS는 차이점
Sass
SCSS
📚[LP] 1. 사운드 재생/정지
jQuery
let myAudio = new Audio();
myAudio.src = "./assets/audio/audio.mp4";
$(".btn-audio").on("click", function () {
$(this).toggleClass("playing");
if ($(this).hasClass("playing")) {
myAudio.play();
} else {
myAudio.pause();
}
});1) HTML에서 <audio src-"xxx.mp3" autoplay></audio>코드는 자동 재생되지 않으며,
2) Javascript에서 사용자의 액션이 없는 상태에서의 audio객체.play() 코드도 작동하지 않는다.
따라서 사운드버튼 클릭시 오디오가 나오고 다시 누르면 일시중지되도록 구현했다.
📚[LP] 2. GSAP scrollTrigger 애니메이션
🔹 객체 크기변화 및 수직 이동 애니메이션
GSAP
gsap.to('.header .logo',{
scrollTrigger:{
trigger:".section.visual",
start:"0% 0%",
end:"100% 0%",
// markers:true,
scrub:0,
},
top:'20px',
transform: 'translate(-50%,0%) scale(1)',
})해당 객체를 transform: translate(-50%,0) scale(5);로 크기가 큰 상태로 먼저 만든 후 스크롤 후 scale(1)로 줄어들도록 구현했다.
🔹 텍스트 나타내기
SCSS
GSAP/jQuery
gsap.set('.txt-oh',{})
gsap.set('.txt-oh .text',{yPercent:100})
$('[data-text]').each(function(i,element){
child = $(this).find('.text');
gsap.to(child,{
scrollTrigger:{
trigger:element,
start:"0% 100%",
end:"100% 50%",
// markers:true,
scrub:0.5,
},
ease:'none',
yPercent:0,
stragger:0.1,
})
})
공용으로 쓰기 위해서 마크업에 [data-text]값을 추가하면 적용될 수 있도록 구현했다. gsap.set('.txt-oh .text',{yPercent:100})로 텍스트를 미리 아래로 내려놓고 SCSS에서overflow:hidden으로 텍스트가 감춰지도록 했다. 스크롤를 내리면 yPercent 값이 0이 되어서 텍스트가 나타나도록 했다.
🔹 특정영역에서 배경 변경하기
GSAP/jQuery
$('[data-theme]').each(function(i,element){
bg = $(this).data('theme');
mostart = (element.dataset.mostart) ? element.dataset.mostart : '0%'
end = (element.dataset.end) ? element.dataset.end : '100%'
ScrollTrigger.create({
trigger:element,
start:`${mostart} 100%`,
end:`${end} 0%`,
// markers:true,
toggleClass: {targets: "body", className: bg}
})
})스크롤시 데이터값에 맞는 클래스가 적용되도록 toggleClass: {targets: "body", className: bg}를 이용하여 구현하였다.
🔹 텍스트 수평 애니메이션
position: sticky;를 이용해서 GSAP에서 pin과 같은 효과를 구현했다.
GSAP
pinMode = gsap.timeline({
scrollTrigger:{
trigger:'#pinMode',
start: "top center",
end: "bottom top",
scrub: 0.5,
// markers:true,
// pin:true,
}
});
pinMode
.addLabel('b')
.set('.question .question',{y:300})
.to('.question .parallax-img',{transform: 'translate(0%,0%) scale(1,1)'},'b')
.to('.question-overlay',{opacity:1},'b')스크롤시 이미지가 커지면서 중첩된 배경색이 나타나도록 구현했다.
//question text animation
gsap.to('.question .question',{
scrollTrigger:{
trigger:'.question',
start: "top center",
end: "bottom top",
scrub: 0.5,
},
x: "-280vw"
});텍스트가 가로로 스크롤 되도록 구현했다.
🔹 이미지 스크롤시 수직 애니메이션
이미지 높이값을 height:120% 기존보다 크게 설정해서 상하로 움직일때 빈공간이 생기지 않도록 한다.
GSAP/jQuery
const imgEl = document.querySelectorAll('[data-y]')
imgEl.forEach(element => {
start = (element.dataset.start) ? element.dataset.start : '100%'
y = (element.dataset.y) ? element.dataset.y : '-15%'
gsap.to(element,{
scrollTrigger:{
trigger:element,
start:`0% ${start}`,
end:"100% 0%",
// markers:true,
scrub:0.5,
},
ease:'none',
yPercent:y,
})
});공용으로 쓰는 애니메이션이기 때문에 애니메이션 시작위치가 달라져야 하는 특정영역의 설정을 위해 특정영역 마크업에 [data-start]값을 지정하고 한줄조건문을 통해 start = (element.dataset.start) ? element.dataset.start : '100%' [data-start]값이 없을 경우엔 기본 설정인 100%로 되도록 했다. 각 이미지별로 높이값 설정 또한 이와 같다.
References
허도경, limewhale : GSAP
oneook.log : GSAP 자바스크립트 애니메이션 라이브러리
코딩 공부 일지 : [CSS] CSS, SASS, SCSS 차이점, 사용방법
Sass(SCSS) 완전 정복
[SCSS] SCSS 문법 정리
HTML/JS: Audio 객체 음악 파일 제어 및 사운드 재생/정지 방법
