개요

particles.js를 사용하면 배경이 움직이는 약간 재미있는 사이트를 만들 수 있습니다.



공식 데모 사이트에서 매개변수를 만지면서 애니메이션을 시도할 수 있습니다.

환경

React － 17.0.2

TypeScript - 4.4.2

react-particles-js - 3.5.3

npm - 7.23.0

설치

프로젝트 폴더를 만들고 Create React App에서 프로젝트를 만듭니다.

cmd

npx create-react-app . --template typescript

react-particles-js을 설치합니다.

cmd

npm i react-particles-js

react-particles-js가 React(17.x)를 지원하지 않는 경우 --force 옵션을 사용하여 설치할 수 있습니다.

구현

코딩

코딩은 매우 간단합니다.
스타일링은 CSS-in-JS로 emotion를 사용합니다.

import React, { VFC } from 'react';
import Particles from 'react-particles-js';
import { IOptions, RecursivePartial } from 'tsparticles';
import { css } from '@emotion/css';
import ParticlesParams from '../assets/particles-default.json';

export const CustomParticles: VFC = () => {
    return (
        <Particles
            className={styles.particles}
            params={ParticlesParams as RecursivePartial<IOptions>}
        />
    )
}

const styles = {
    particles: css`
        position: absolute;
        width: 100%;
        height: 100%;
    `
}

설정

params로 가져온 json 파일을 지정합니다.
이 json 파일로, 색이나 노드의 크기, 마우스 조작시의 애니메이션등의 설정을 실시합니다.
이러한 설정은 공식 데모를 사용하여 시도하면서 조정할 수 있습니다. 또한 설정을 json 파일로 내보낼 수 있습니다.

설정 템플릿

공식 데모에는 몇 가지 설정 템플릿이 있습니다.
예를 들어, Snow를 선택하면 눈이 내리는 것 같은 애니메이션이 됩니다.

요약

애니메이션은 막 구현하려고 하면 복잡해지기 쉽기 때문에, particles.js와 같이 간단하게 사용할 수 있는 패키지는 정말로 고맙습니다.
무엇보다 즐겁습니다