Paper.js는 HTML5의 Canvas를 활용하여 2D 그래픽을 그릴 수 있는 JavaScript 라이브러리입니다. 이번 블로그 포스트에서는 Paper.js를 사용하여 마우스 효과와 스크롤 애니메이션을 구현하는 방법을 알아보겠습니다.
Paper.js 설치
Paper.js를 사용하기 위해서는 먼저 해당 라이브러리를 다운로드하거나 CDN을 통해 불러와야 합니다. 아래의 코드를 HTML 파일의 <head> 태그 안에 추가해주세요.
<script src="https://unpkg.com/paper/dist/paper-full.min.js"></script>
마우스 효과 구현
Paper.js를 사용하여 마우스 커서 위에 움직이는 도형을 그려보겠습니다. 움직이는 도형은 마우스 커서를 따라 다니며, 도형에 마우스 커서가 접근하면 색상이 변경됩니다.
// HTML 파일의 <script> 태그 안에 추가해주세요.
// Paper.js 초기화
paper.install(window);
paper.setup('myCanvas');
// 움직이는 도형 생성
var circle = new Path.Circle({
center: new Point(100, 100),
radius: 50,
fillColor: 'blue'
});
// 마우스 커서 위치에 따라 도형이 움직임
function onMouseMove(event) {
circle.position = event.point;
// 도형과 마우스 커서의 거리 계산
var distance = event.point.getDistance(circle.position);
// 도형과 마우스 커서의 거리에 따라 색상 변경
if (distance < 50) {
circle.fillColor = 'red';
} else {
circle.fillColor = 'blue';
}
}
위의 코드를 <script> 태그 안에 추가하면 움직이는 도형이 생성되고, 마우스 커서 위치에 따라 도형이 움직이며 색상이 변경됩니다. 나중에 <canvas id="myCanvas"></canvas>를 통해 아이디가 “myCanvas”인 캔버스를 생성하는 것을 잊지 않도록 주의해주세요.
스크롤 애니메이션 구현
Paper.js를 사용하여 스크롤에 반응하는 애니메이션을 구현해보겠습니다. 페이지를 스크롤할 때마다 도형이 점점 커지는 애니메이션이 발생합니다.
// HTML 파일의 <script> 태그 안에 추가해주세요.
// Paper.js 초기화
paper.install(window);
paper.setup('myCanvas');
// 도형 생성
var rect = new Path.Rectangle({
point: new Point(100, 100),
size: new Size(100, 100),
fillColor: 'blue'
});
// 스크롤 이벤트를 감지하여 도형 크기 변경
function onScroll(event) {
var scrollAmount = event.delta.y;
// 스크롤에 따라 도형 크기 변경
rect.scale(1 + scrollAmount * 0.01);
}
// 스크롤 이벤트 리스너 등록
$(window).scroll(onScroll);
위의 코드를 <script> 태그 안에 추가하면 스크롤에 반응하는 애니메이션이 동작합니다. 페이지를 스크롤할 때마다 도형의 크기가 점점 커집니다. 다시 한 번 <canvas id="myCanvas"></canvas>가 있는지 확인해주세요.
결론
Paper.js를 사용하여 마우스 효과와 스크롤 애니메이션을 구현하는 방법을 알아보았습니다. 이러한 기능을 활용하면 웹 페이지에 다양한 인터랙션을 추가할 수 있습니다. Paper.js의 다양한 기능을 탐구해보고, 창의적인 프로젝트를 만들어보세요!