[Motion] Sequence motion

내가 만들어서 내가 쓰자 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 안에 들어 가야 한다

event

---

canvasMotionFn.init() //함수 init
canvasMotionFn.scroll() //스크롤시 호출
canvasMotionFn.play() //자동재생시
canvasMotionFn.reversePlay() //역재생시
canvasMotionFn.pause() //정지시
canvasMotionFn.resize() //리사이즈 할시
canvasMotionFn.destroy() //파괴
canvasMotionFn.draw(0~1) //해당 씬 그리기

option

---

기본 옵션

옵션명	내용	기본값
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	이벤트 프레임 나갈때 실행

예시 보기 (수정중)