본문 바로가기
Web/Javascript

[JS - Plugin] Scroll Masic

by juein 2019. 12. 13.

라이센스 : [MIT] License

공식문서 : http://scrollmagic.io/docs

 

ScrollMagic Documentation

Quicklinks: About | Download | Installation | Usage | Help | Compatibility | Author | License | Thanks ScrollMagic helps you to easily react to the user's current scroll position. It's the perfect library for you, if you want to ... animate based on scroll

scrollmagic.io

 

한눈에 보는 Cheat Sheet

 

ScrollMagic-CheatsheetV1.pdf
0.18MB

 

 

스크롤매직을 제대로 활용하려면 doc문서를 참고하는게 좋다.

밑에는 자주 쓰는 기능만 간단하게 설명

 

//컨트롤러 선언
var ctrl = new ScrollMagic.Controller();

new ScrollMagic.Scene({
	reverse: true, //false : 한번만 적용, 기본값 : true
	triggerElement: this, // 컨텐츠 영역. '#project01 img', 등 원하는 요소로 바꿀 수 있다.
	//reverse : true 설정시 스크롤 상/하 움직임이 반전된다.
	duration: '100%',
	//duration: '100%', // duration:$("#intro").height() 등 동작하는 구간을 설정하여 end 생성,
	// 숫자로 줄때는 따옴표 없이, %로 줄때는 따옴표 넣고  %를 주면 뷰포트의 %값으로 동작
	// ex ) ex. duration: 300 / duration: '100%'
	triggerHook: 0.25 //0은 뷰포트의 최상단, 1은 뷰포츠의 최하단으로 trigger 팁이 이동
	// 0.9 설정시 뷰포트에서 보여질 때 fade in, 뷰포트에서 벗어날 즈음 fade out되는 효과를 가진다.
}).setTween(testTween) //tween 실행
.setClassToggle('box', 'test') // 원하는곳에 클래스 추가 (box 클래스에 test 클래스추가)
.addIndicators({
		name: 'test scene', //팁 이름, 기본값 넘버링
		colorTrigger: "white", //트리거 팁 색상
		colorStart: "white", //스타트 팁 색상
		colorEnd: "white", //종료 팁 색상
		indent: 40 //우측 스크롤바부터 얼마나 떨어뜨릴지
})
.on("start end", function (e) { // 스크롤 이벤트 발생지점에서 콜백 함수를 던져준다. (type, state 등..)
    console.log(e);
});
.addTo(ctrl);

 

기본 사용 예제

 

1) 지정한 위치에 스크롤(triggerHook 지정위치) 에 도달하면 Tween 실행

 

See the Pen ScrollMasic guide (1) by juein (@juein) on CodePen.

 

2) 위 예제의 반복효과를 원할 경우엔 이런 식으로 사용 할 수도 있다.

 

See the Pen ScrollMasic guide (2) by juein (@juein) on CodePen.

 

3) pin을 활용하면 가로스크롤이 되는 것 처럼 활용도 가능

 

 

See the Pen ScrollMasic guide (3) by juein (@juein) on CodePen.

댓글0