[Motion] SVG canvas mask

내가 만들어서 내가 쓰자 svg canvas mask plugin

원리

---

svg 과 일반 이미지로 canvas - globalCompositeOperation 속성을 이용하여 mask animation을 보여줌

사용법

---

1.script import

import { _faveMaskMotion } from 'svg-mask-motion.mjs';

2.html 소스상에 canvas 태그가 있어야 한다

3.함수 선언해주고 인자 넣기

//첫번째 인자 node는 canvas를 타겟으로 한다
const canvasMotionFn = new svgMaskMotion(Canvas Node, Options);

4.자동재생은 무조건 autoPlay:true 옵션을 넣어야하고
스크롤 모션은 무조건 moveNode:node 옵션을 넣어야 한다

event

---

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

option

---

default option

옵션명	내용	기본값
svgSrc	SVG 이미지 경로	''
bgImgSrc	배경 이미지 경로	''
frameImgSrc	프레임 이미지 경로 (단 SVG이미지와 같은 사이즈여야 함)	''
minScale	최소 스케일 사이즈	1
maxScale	최대 스케일 사이즈	1
viewW	이미지 netural 넓이
viewH	이미지 netural 높이
originX	X축 이동하는 기준점 (퍼센트값)	1
originY	Y축 이동하는 기준점 (퍼센트값)	1
positionX	스크롤이나 플레이시 이동하려고 하는 X 좌표	0
positionY	스크롤이나 플레이시 이동하려고 하는 Y 좌표	0
bgFadeIn	배경 fade in 유/무	false
bgFadeOut	배경 fade out 유/무	false
reverse	반대로 모션할지 유/무	false
speed	스피드 값	0.01
alignX	X축 얼라인	'left'
alignY	Y축 얼라인	'top'
bgColor	배경 색	#000000
motionType	모션 타입	s
startPercent	sticky 영역에서 스크롤 시작 지점	0

autoplay option

옵션명	내용	기본값
autoPlay	자동재생 가능 유/무	false

scroll option

옵션명	내용	기본값
moveNode	스크롤 이동되는 거리를 가진 부모 노드	null

callback

---

옵션명	내용	인자
startEvent	오토플레이 - 모션 시작하자마자 한번 실행
endEvent	오토플레이 / 스크롤 - 모션이 완료된 후 실행
scrollEvent	스크롤 - 스크롤 진행 시 실행

예시 보기(수정중)