02.17 AM 00: 36 야심한 시각.
나는 오늘도 포트폴리오 작업중이다.
배울 게 많아서 하나하나 배우다보니까 하루가 어떻게 가는지 모르겠다. 점점 진짜 박쥐가 돼가는 거 같은데.. 🦇
모든 입문자가 나와 같을까? 배우는 방식도 천차만별이라지만 내 공부 방식은 굉장히 연쇄적이다.
디자인? 포토샵 배워야지. 요즘엔 UI툴 쓴다던데 피그마도 배워볼까.
프로토타입도 만들면 좋을 것 같은데? 프로토파이 배우자. 이런 식이다…
따로 정리해두긴 했는데 갈 길이 바쁘다보니 포스팅은 미뤄뒀다.
지금은 내 포트폴리오의 핵심이라고 생각하는 ‘ScrollMagic 라이브러리’를 배우는 중이다.
codepen으로 실습하면서 배운 내용 정리도 해볼 겸 이것 만큼은 바로바로 포스팅해볼 생각이다.
Let's GO!!
ScrollMagic
스크롤매직 라이브러리는 스크롤 애니메이션을 만드는데 도움을 주는 자바스크립트 라이브러리 중 하나이다.
간단한 스크롤 애니메이션은 ‘AOS 라이브러리’로도 많이 구현한다고 하는데
완성도 높고 복잡한 애니메이션을 구현할 때는 ‘ScrollMagic’과 ‘GSAP(TweenMax)’를 이용하는 것이 더 범용적인(?) 방법이라는
글을 보았다. 어려운 게 더 끌리는 법 아닌가. 스크롤 매직을 배워보기로 생각했다.
GSAP(TweenMax) 역시 아직 잘 아는 것은 아니나 동시에 같이 배워볼 생각이다.
우선, CDN을 추가해준다.
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
debug.addIndicators.min.js 파일은 인디케이터를 표시하여, 마크업을 좀 더 편안하게 할 수 있도록 도와준다.
+ 당연하게도, GSAP(TweenMax)도 추가해줘야한다.
ScrollMagic 동작 원리
ScrollMagic의 동작 원리를 이해하면 스크립트를 작성하기 더 수월하다.
- ScrollMagic Animation을 실행하기 위한 Controller를 생성한다.
- ScrollMagic 상세 옵션 설정을 위한 Scene Object를 생성한다
- GSAP(TweenMax) Animation Object를 생성한다.
→ 여기까지 메인 작업. 사실, 만드는 순서는 상관없는데 의미적으로 더 상위 항목부터 생성하는 것이 이해하기 수월한 것 같아서 나는 이렇게 하려고 한다.
- GSAP Animation object를 Scene Object에 추가한다.
- Scene Object를 Controller에 추가한다.
한번 더 요약하면,
ScrollMagic.Controller > ScrollMagic.Scene > GSAP animation
순서대로 만들어주고 하위 요소(의미적으로)를 상위 요소에 추가, 추가!
백문불여일견, 실습! 실습!
See the Pen ScrollMagic-기초1 by cheolbat (@cheolship) on CodePen.
코드펜 사이트에서 만들었을 땐 잘 됐는데 embed하니 offset, duration 인디케이터의 위치가 배율에 따라 달라져 버렸다ㄷ..
정상적이라면 인디케이터가 원하는 trigger 시작점에 맞춰져 있어야 한다. 애니메이션이 시작되는 trigger 지점은 offset 으로 조절할 수 있다. 끝나는 지점은 duration으로 조절할 수 있다.
코드펜 스크립트를 순서대로 정리해보자면,
document.addEventListener('DOMContentLoaded',()=>{
let controller = new ScrollMagic.Controller();
})
1. HTML,CSS 작업을 끝냈다면 script 작성시 우선 해야 할 일은 위에서 언급했던 ScrollMagic.Controller를 생성해주는 것.
document.addEventListener('DOMContentLoaded',()=>{
let controller = new ScrollMagic.Controller();
let scene = new ScrollMagic.Scene();
})
2. 그런 다음은? 역시 ScrollMagic.Scene 을 생성해준다.
document.addEventListener('DOMContentLoaded',()=>{
let controller = new ScrollMagic.Controller();
let tween1 = TweenMax.to('#animate1', 0.5, {
scale:2
})
let scene = new ScrollMagic.Scene();
})
3. 마지막으로 TweenMax Animation을 생성해주면 거의 다 했다.
document.addEventListener('DOMContentLoaded',()=>{
let controller = new ScrollMagic.Controller();
let tween1 = TweenMax.to('#animate1', 0.5, {
scale:2
})
let scene = new ScrollMagic.Scene().setTween(tween1);
//setTween()메서드로, 만들어둔 TweenMax Animation을 ScrollMagic.Scene에 넣어준다.
})
4. setTween() 메서드로, 만들어둔 TweenMax Animation을 ScrollMagic.Scene에 넣어준다.
document.addEventListener('DOMContentLoaded',()=>{
let controller = new ScrollMagic.Controller();
let tween1 = TweenMax.to('#animate1', 0.5, {
scale:2
})
let scene = new ScrollMagic.Scene()
.setTween(tween1)
.addTo(controller)
.addIndicator({
name: "입니다."
})
//addTo() 메서드로 Scene을 Controller에 넣어준다. 끝.
//아 추가로 addIndicators 메서드로 인디케이터도 표시해준다.
//오브젝트로 이름 추가해줄 수 있다.
})
5. addTo() 메서드로 Scene을 Controller에 넣어주고 addIndicators() 메서드도 편의를 위해 잊지 말고 써주자.
이렇게나 간단하다. 간단한 걸 만들어서 그런가? 그럼 다음편으로‼️
++ 요즘엔 GSAP scrollTriger 활용이 많다 해서,, 그걸 다시 배워보는 걸로 ㅎ
'TIL > Library' 카테고리의 다른 글
| [GSAP ScrollTrigger] Tutorial (0) | 2023.02.28 |
|---|