https://greensock.com/docs/v3/Installation?checked=core,scrollTrigger
Docs
Documentation for GreenSock Animation Platform (GSAP)
greensock.com
greem sock라는 사이트에 들어가서 다운을 받아 주지 않고 cnd를 사용해주었다
밑의 화면은 Dos 클릭해서 Installation을 클릭하면 밑의 사진이나온다

이것도 마찬가지로 jquery 아래에 입력해준다
ScrollTrigger를 사용하기위해 product 에 ScrollTrigger를 클릭해 내려가보면
아래 화면이 나오는데 EXAMPLES 를 클릭해주면된다

아래의 다양한 ScrollTrigger들이 나온다

Cover Layered Sections를 클릭해주었다 그럼 아래의 화면이 나오는데 복붙하면 저위의 Cover Layered Sections이 화면에 나오게된다 CSS에는 색이 지정안되었는데 이것은 알아서 지정해주어야한다

css까지 해주면 밑의 화면처럼나오게된다

css
.blue {
background-color: blue;
}
.panel{
width: 100%;
height: 700px;
}
.yellow {
background-color: yellow;}
.red {
background-color: lightcoral;}
.green {
background-color: yellowgreen;}
.blue {
background-color: lightblue;}
모든링크출처 green sock
'JQuery' 카테고리의 다른 글
| 프로그래스바 만들기 (0) | 2022.03.16 |
|---|---|
| jquery 플러그인 Magnific Popup사용법 (0) | 2022.03.16 |
| slick 그림넣기와 화살표 버튼 docts 수정하기 (0) | 2022.03.14 |
| 사용자 정의 이펙트 animate (0) | 2022.03.11 |
| 이펙트효과제어 .delay() .stop() .finish() (0) | 2022.03.11 |