내가 만들어서 내가 쓰자 Sequence motion plugin - V1.0
시퀀스 이미지와 canvas 를 이용하여 재생 및 스크롤 모션 제어
1.script import
import { _faveMaskMotion } from 'fave-sequence.mjs';
2.html 소스상에 canvas 태그가 있어야 한다
3.함수 선언해주고 인자 넣기
//첫번째 인자 node는 canvas를 타겟으로 한다
const canvasMotionFn = new faveSequence(Canvas Node, Options);
4.자동재생은 무조건 autoPlay:true 옵션을 넣어야하고
스크롤 모션은 무조건 class="sticky-wrap" Node 안에 들어 가야 한다
canvasMotionFn.init() //함수 init
canvasMotionFn.scroll() //스크롤시 호출
canvasMotionFn.play() //자동재생시
canvasMotionFn.reversePlay() //역재생시
canvasMotionFn.pause() //정지시
canvasMotionFn.resize() //리사이즈 할시
canvasMotionFn.destroy() //파괴
canvasMotionFn.draw(0~1) //해당 씬 그리기
기본 옵션
옵션명 | 내용 | 기본값 |
---|---|---|
imgSrc | 시퀀스 이미지 있는 폴더 경로 | '' |
fileName | 파일경로 (첫번째 이미지는 0번째 부터) | '' |
mobileFileName | 모바일 시퀀스 이미지 | '' |
frame | 시퀀스 프레임 수 | 0 |
frameDivision | 프레임 나누기 | 1 |
startFrame | 시작 프레임 수 | 0 |
startPercent | sticky 영역에서 스크롤 시작 지점 | 0 |
speed | 스피드 값 | 1 |
preLoadImg | 먼저 로드할 프레임 수 | [] |
frameEventStart | 이벤트 발생할 프레임 번호 | 0 |
bgAlpha | 배경 투명처리 (같은 시퀀스 이미지 svg 파일 필요) | false |
targetBgAlphaFrame | 배경 투명처리 할 프레임 (같은 시퀀스 이미지 svg 파일 필요 / bgAlpha 옵션은 무조건 false) | null |
자동재생 옵션
옵션명 | 내용 | 기본값 |
---|---|---|
autoPlay | 자동재생 가능 유/무 | false |
callback
옵션명 | 내용 | 인자 |
---|---|---|
loadEvent | 시퀀스 전부 로드 완료 시 실행 | |
frameInEvent | 이벤트 프레임 진입 시 실행 | |
frameOutEvent | 이벤트 프레임 나갈때 실행 |