Gsap Parallax 기본 애니메이션
Prallax란
멀리 있는 물체는 천천히 움직이고, 가까이 있는 물체는 빨리 움직이는 현상을 의미합니다. 이 현상을 이용하면 입체감, 실체감을 높여서 보다 인상적인 디자인을 할 수 있습니다.
사용기술
- html
- css
- JavaScript
배우기전 학습해야할 것
- Css
참고 사이트 gsap.com
gsap사이트
parallax를 표현하고 싶으면 gsap에서 스크립트 링크를 가져와야하는데요
1
2
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
내가 사용하고 싶은 것에 맞는 링크를 가져와야합니다 자 그럼 시작해보겠습니다.
01 gsap
gsap를 사용하려면 사이트에 설명이 적혀있겠지만 사용하기 위해서는 먼저
1
2
3
4
5
6
7
8
9
<script>
//01
gsap.to("#section01 .img", {
duration: 2,
x: 500,
rotation: 360,
borderRadius: 100
});
</script>
이렇게 gsap.to를 사용하여 “section01 .img”에 제가 원하는 움직임을 추가 할 수 있습니다.
gsap.to(“class, id이름 “,{ 원하는 움직임과 변화 }) css를 사용해보셨다면 원하는 움직임과 변화를 자유롭게 줄 수 있다고 생각합니다.
제가 입력한 것을 실행해보면 사이트를 열면 네모난 이미지가 굴러가고 이미지를 동그랗게 만드는 이미지가 됩니다.
02 gsap trigger
위에서는 화면을 키면 바로 굴러갔지만 이번엔 scrollTrigger를 추가해서 화면에 보이면 움직이게 해주도록 하겠습니다.
1
2
3
4
5
6
7
8
9
10
11
12
//02 : trigger
gsap.to("#section02 .img", {
duration: 2,
x: 500,
rotation: 360,
borderRadius: 100,
// 화면에 보이면 바로 움직입니다.
scrollTrigger: {
trigger: "#section02 .img"
}
});
이렇게 gsap명령어를 쓰고 그 밑에 scrollTrigger를 입력하고 trigger에 움직이게 해주고 싶은 이미지를 지정해주면 됩니다. 화면에 보였을 때 움직이게 만들어 주었습니다.
03 gsap toggleActions
toggleActions는 상황별로 애니메이션을 처리해주는 명령어인데요 한번 명령어를 볼까요?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//03 : toggleActions : 상황별 애니메이션 처리
gsap.to("#section03 .img", {
duration: 2,
x: 500,
rotation: 360,
borderRadius: 100,
// onEnter, onLeave, onEnterBlack, onLeaveBack
// "play", "pause", "resume", "reset", "restart", "complete", "reverse", "none"
scrollTrigger: {
trigger: "#section03 .img",
toggleActions: "play none reverse none"
}
});
04 gsap 시작과 끝 조절
이번엔 시작과 끝을 조절하는 법을 배울 겁니다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//04 : start, end : 애니메이션 시작과 끝 조절
gsap.to("#section04 .img", {
duration: 2,
x: 500,
rotation: 360,
borderRadius: 100,
scrollTrigger: {
trigger: "#section04 .img",
toggleActions: "play reverse none none",
markers: false,
start: "top 50%",
end: "bottom 30%"
}
});
markers: true 는 시작과 끝 지점을 표시해주는 선을 출력하는 것입니다. start: “top 50%” // 시작 지점을 정함 end: “bottom 30%” // 끝나는 지점을 정함
저는 start에 top:50%를 줬지만 markers를 사용해서 제가 원하는 위치에서 시작할 수 있도록 보면서 조절할 수 있고 end 마찬가지로 markers를 보고 끝나는 지점을 조절하여 시작 지점으로 돌아가게 하는 걸 볼 수 있습니다.
05 gsap scrub
이번엔 scrub에 대해서 배울 건데요 scrub은 내가 스크롤 한 만큼만 움직이게 해줍니다. 한번 같이 해볼까요
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//05 : scrub : 스크롤 한 만큼만 움직입니다.
gsap.to("#section05 .img", {
duration: 2,
x: 500,
rotation: 360,
borderRadius: 100,
scrollTrigger: {
trigger: "#section05 .img",
markers: false,
start: "top 50%",
end: "bottom 10%",
scrub: true // true | number
}
});
scrub: true를 사용해서 스크롤을 내리면 굴러가고 스크롤을 위로 올리면 돌아오게 만들어주는 명령어 입니다.
06 gsap pin
pin은 화면을 고정을 시켜주는 메서드입니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//06 : pin
gsap.to("#section06 .img", {
duration: 2,
x: 500,
rotation: 360,
borderRadius: 100,
scrollTrigger: {
trigger: "#section06 .img",
start: "top 50%",
end: "bottom 200px",
scrub: true,
pin: true,
markers: false,
}
});
pin은 화면을 고정시켜주는 건데요 지금은 사용해도 어떤 느낌인지 아직은 감이 안 오실텐데 뒤에 더 배우시면 이럴 때 사용한다는 걸 알 수 있습니다.
07 gsap toggleClass
toggleClass는 Class를 active 시켜주는 명령어 입니다. 먼저 CSS에서 img가 active되면 다른 이미지가 나오게 만들어주고
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// CSS
.main__inner>section .img.active {
background-image: url(assets/img/img02.jpg);
}
//07 : toggleClass
gsap.to("#section07 .img", {
duration: 2,
x: 500,
rotation: 360,
borderRadius: 100,
scrollTrigger: {
trigger: "#section07 .img",
start: "top 50%",
end: "bottom 200px",
scrub: true,
toggleClass: "active",
markers: true,
id: "box7"
}
});
toggleClass를 이용해서 Class를 active로 만들었습니다 그러면 CSS에 img가 active되면 img02로 바뀌게 만들어줬기 때문에 스크롤을 해서 시작점에 가면 이미지가 바뀌고 끝나는 지점에 가면 이미지가 원래대로 바뀝니다.
이상으로 parallax를 맞춰보도록 하고 다음 블로그에 또 parallax Part2를 배워보도록 하겠습니다.