[javascript] Paper.js를 사용하여 웹 사이트의 동적 배경 애니메이션 구현

01 Dec 2023

javascript

웹 사이트에 동적하고 화려한 배경 애니메이션을 추가하고 싶다면, Paper.js를 사용해보는 것을 추천합니다. Paper.js는 HTML5 Canvas를 기반으로 동작하는 빠르고 강력한 2D 벡터 그래픽 라이브러리입니다. 이번 튜토리얼에서는 Paper.js를 사용하여 웹 사이트의 배경에 파티클 효과와 그라데이션을 추가하는 방법을 알아보겠습니다.

Paper.js 설치

먼저, Paper.js를 사용하기 위해 필요한 파일을 다운로드하고 웹 사이트에 추가해야합니다. 아래의 코드를 <head> 태그 안에 추가하세요.

<script src="https://unpkg.com/paper/dist/paper-core.js"></script>

캔버스 생성

Paper.js를 사용하여 애니메이션을 구현하려면, HTML5 Canvas 요소를 생성해야 합니다. <body> 태그 안에 캔버스를 추가하세요.

<canvas id="myCanvas"></canvas>

스크립트 작성

이제, Paper.js를 사용하여 배경 애니메이션을 구현하기 위한 JavaScript 코드를 작성해보겠습니다. 아래의 코드를 <script> 태그 안에 추가하세요.

// 캔버스 요소 가져오기
var canvas = document.getElementById('myCanvas');

// Paper.js에서 캔버스 요소를 사용할 수 있도록 설정
paper.setup(canvas);

// 파티클 그룹 생성
var particles = new paper.Group();

// 파티클 생성 함수
function createParticle() {
    var particle = new paper.Path.Circle({
        center: [Math.random() * paper.view.size.width, Math.random() * paper.view.size.height],
        radius: 5,
        fillColor: 'white'
    });

    particles.addChild(particle);
}

// 애니메이션 프레임마다 실행될 함수
function onFrame(event) {
    if (event.count % 10 === 0) {
        createParticle();
    }

    particles.children.forEach(function(particle) {
        particle.position.x += Math.random() * 2 - 1;
        particle.position.y += Math.random() * 2 - 1;

        if (particle.position.x < 0 || particle.position.x > paper.view.size.width ||
            particle.position.y < 0 || particle.position.y > paper.view.size.height) {
            particle.remove();
        }
    });
}

// 뷰 리사이즈 이벤트 핸들러
function onResize(event) {
    // 캔버스 크기 조정
    paper.view.viewSize = [window.innerWidth, window.innerHeight];
}

// 이벤트 리스너 등록
paper.view.onFrame = onFrame;
window.addEventListener('resize', onResize);

// 초기 실행
onResize();

위의 코드에서는 Paper.js를 사용하여 파티클 그룹을 생성하고, 파티클을 생성하고 움직이는 애니메이션을 구현합니다. 파티클은 캔버스 영역 내에서 랜덤한 위치로 생성되며, 랜덤한 속도로 움직입니다. 또한 캔버스 크기가 변경되는 경우에도 애니메이션을 조정하기 위해 onResize 함수를 작성하였습니다.

CSS 스타일링

마지막으로, 캔버스의 스타일을 적용하여 적절한 크기와 위치로 배치해야합니다. CSS 파일을 포함하고, myCanvas id를 가진 요소에 스타일을 추가하세요.

#myCanvas {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: #000;
}

위의 CSS 코드는 캔버스를 전체 화면에 채우도록 설정하고, 배경색을 검정색으로 지정합니다.

결과 확인

이제 웹 브라우저에서 웹 사이트를 실행하면, Paper.js를 사용하여 구현한 동적 배경 애니메이션이 표시됩니다.

Paper.js를 사용하여 웹 사이트에 동적 배경 애니메이션을 구현하는 방법에 대해 알아보았습니다. 이를 활용하여 웹 사이트를 더욱 독특하고 흥미로운 경험으로 만들어보세요. Paper.js에는 다양한 기능과 도구가 있으므로, 자세한 내용은 공식 문서를 참조하시기 바랍니다.