새로운 색종이 모양

tsParticles을 사용하면 원, 사각형, 이미지, 텍스트, 다각형, 하트, 나선형 및 기타 모양으로 많은 입자 구성을 만들 수 있으며 자신의 구성도 만들 수 있습니다.

며칠 전 저는 tsParticles로 아름다운 색종이 조각 애니메이션을 만들기 위해 새로운 모양의 색종이 조각을 출시했습니다. 따라서 구성을 유지하고 모양을 변경하여 나타나는 것을 볼 수 있습니다.

그것을 달성하는 방법을 보자.

바닐라 JS 설정

표준 HTML/CSS/JavaScript 정적 웹 사이트부터 시작하겠습니다.

<!-- tsParticles div container -->
<div id="tsparticles"></div>

<!-- tsParticles main script -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<!-- tsParticles confetti shape script -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

항상 그렇듯이 페이지에 충실한tsparticles div만 있으면 됩니다. 여기서 id 속성은 tsparticles로 설정되지만 원하는 값으로 설정할 수 있습니다.

/* what no css needed? 🤯 */

tsParticles가 fullScreen 옵션을 도입한 것을 기억한다면, 사용한 적이 없더라도 걱정하지 마십시오. 지금부터 설명하겠습니다.

// the tsParticles loading script
tsParticles.load("tsparticles", {
  fullScreen: {
    enable: true
  },
  particles: {
    number: {
      value: 0 // no starting particles
    },
    color: {
      value: ["#1E00FF", "#FF0061", "#E1FF00", "#00FF9E"] // the confetti colors
    },
    shape: {
      type: "confetti", // the confetti shape
      options: {
        confetti: { // confetti shape options
          type: ["circle", "square"] // you can only have circle or square for now
        }
      }
    },
    opacity: {
      value: 1, // confetti are solid, so opacity should be 1, but who cares?
      animation: {
        enable: true, // enables the opacity animation, this will fade away the confettis
        minimumValue: 0, // minimum opacity reached with animation
        speed: 2, // the opacity animation speed, the higher the value, the faster the confetti disappear
        startValue: "max", // start always from opacity 1
        destroy: "min" // destroy the confettis at opacity 0
      }
    },
    size: {
      value: 7, // confetti size
      random: {
        enable: true, // enables a random size between 3 (below) and 7 (above)
        minimumValue: 3 // the confetti minimum size
      }
    },
    life: {
      duration: {
        sync: true, // syncs the life duration for those who spawns together
        value: 5 // how many seconds the confettis should be on screen
      },
      count: 1 // how many times the confetti should appear, once is enough this time
    },
    move: {
      enable: true, // confetti need to move right?
      gravity: {
        enable: true, // gravity to let them fall!
        acceleration: 20 // how fast the gravity should attract the confettis
      },
      speed: 50, // the confetti speed, it's the starting value since gravity will affect it, and decay too
      decay: 0.05, // the speed decay over time, it's a decreasing value, every frame the decay will be multiplied by current particle speed and removed from that value
      outModes: { // what confettis should do offscreen?
        default: "destroy", // by default remove them
        top: "none" // but since gravity attract them to bottom, when they go offscreen on top they can stay
      }
    }
  },
  background: {
    color: "#000" // set the canvas background, it will set the style property
  },
  emitters: [ // the confetti emitters, the will bring confetti to life
    {
      direction: "top-right", // the first emitter spawns confettis moving in the top right direction
      rate: {
        delay: 0.1, // this is the delay in seconds for every confetti emission (10 confettis will spawn every 0.1 seconds)
        quantity: 10 // how many confettis must spawn ad every delay
      },
      position: { // the emitter position (values are in canvas %)
        x: 0,
        y: 50
      },
      size: { // the emitter size, if > 0 you'll have a spawn area instead of a point
        width: 0,
        height: 0
      }
    },
    {
      direction: "top-left", // same as the first one but in the opposite side
      rate: {
        delay: 0.1,
        quantity: 10
      },
      position: {
        x: 100,
        y: 50
      },
      size: {
        width: 0,
        height: 0
      }
    }
  ]
});

네, 많은 코드 감사합니다. 하지만 색종이 조각을 보고 싶어요!! 🎉

ReactJS / PreactJS / InfernoJS

아시다시피 tsParticles에는 사용할 준비가 된 React/Preact/Inferno 구성 요소가 있습니다.

위에서 본 것과 동일한 작업 구성으로 아래에 React CodeSandbox를 포함하겠습니다.



Preact 및 Inferno와 함께 사용하려면 선호하는 라이브러리와 구성 요소를 사용하십시오.

Vanilla JavaScript와의 차이점을 설명하겠습니다.

먼저 react-tsparticles(또는 Preact 또는 Inferno용 동급 패키지) 및 색종이 모양tsparticles-shape-confetti을 설치해야 합니다.

npm install react-tsparticles tsparticles-shape-confetti

또는

yarn add react-tsparticles tsparticles-shape-confetti

그런 다음 React와 유사한 코드에서:

import Particles from "react-tsparticles"; // import the tsParticles component
import { loadConfettiShape } from "tsparticles-shape-confetti"; // import the confetti shape

const loadConfetti = (tsparticles) => {
  loadConfettiShape(tsparticles);
}; // create a function that loads the confetti shape in the tsParticles instance

그런 다음 <Particles /> 구성 요소를 구성하십시오.

<Particles
      id="tsparticles"
      init={loadConfetti}
      options={{ /* omitted for brevity, it's the same written before */ }} />

모난

여기에서 Angular를 사용하여 만든 작업 샘플을 볼 수 있습니다. 종속성은 React 샘플과 유사하며 ng-particles 대신 react-tsparticles를 사용하면 됩니다.

Vue.js

여기에서 Vue.js를 사용하여 만든 작업 샘플을 볼 수 있습니다. 이번에 올바른 패키지는 Vue.js 2의 경우 particles.vue 또는 Vue.js 3의 경우 particles.vue3입니다.

에에에에에에

상관도 없고...

죄송합니다... tsParticles가 마음에 드신다면 GitHub의 작은 별 ⭐️로 저장소를 지원해 주세요.

마테브루니 / tsparticles

tsParticles - 고도로 사용자 정의 가능한 파티클 애니메이션을 쉽게 만들고 이를 웹 사이트의 애니메이션 배경으로 사용합니다. React, Vue.js(2.x 및 3.x), Angular, Svelte, jQuery, Preact, Inferno에 사용할 수 있는 구성 요소를 사용할 준비가 되었습니다.

tsParticles - TypeScript 입자

파티클 생성을 위한 경량 TypeScript 라이브러리입니다. 종속성이 없고( * ) 브라우저가 준비되었습니다!
Particles.js TypeScript로 변환, 종속성 없음( * ), 새롭고 멋진 😎 기능으로 개선되고 다양한 버그가 수정되었으며 적극적으로 유지 관리되고 있습니다!

웹사이트에서 사용하시겠습니까?

이 라이브러리는 가장 인기 있는 두 개의 CDN에서 사용할 수 있으며 사용하기 쉽고 바로 사용할 수 있습니다. particle.js를 사용하고 있었다면 훨씬 더 쉽습니다.
필요한 모든 링크가 포함된 지침below을 찾을 수 있으며 TypeScript에 겁먹지 마세요. 소스 언어일 뿐입니다.
출력 파일은 JavaScript입니다. 🤩
CDN 및 npm에는 Javascript, 번들 브라우저 준비(tsparticles.min.js) 및 import 구문에 대해 분할된 모든 파일에 필요한 모든 소스가 있습니다.
아래의 몇 줄에 여전히 관심이 있다면 다음에서 마이그레이션하기 위한 몇 가지 지침이 있습니다.

View on GitHub