Jquery 플러그인Green Sock ScrollTrigger

https://greensock.com/docs/v3/Installation?checked=core,scrollTrigger 

Docs

 

greem sock라는 사이트에 들어가서 다운을 받아 주지 않고 cnd를 사용해주었다

밑의 화면은 Dos 클릭해서 Installation을 클릭하면 밑의 사진이나온다

 

이것도 마찬가지로 jquery 아래에 입력해준다

 ScrollTrigger를 사용하기위해 product 에  ScrollTrigger를 클릭해 내려가보면

아래 화면이 나오는데 EXAMPLES 를 클릭해주면된다

EXAMPLES클릭

 

 

 

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

Cover Layered Sections클릭

 

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