[React.js] tsParticles를 사용하여 아름답고 사실적인 색종이 애니메이션을 만드는 방법

tsParticles와 1.30 버전에서 생성된 새로운 색종이 조각 애니메이션에 대한 글을 썼습니다.




이 구성은 모든 React tsParticles 설치에서 그대로 사용할 수 있습니다.

import Particles from "react-tsparticles"

<!-- this component can be placed anywhere -->
<Particles options={/* paste options here */} />

작업 샘플은 아래에서 찾을 수 있습니다.




마테브루니 / tsparticles


tsParticles - 고도로 사용자 정의 가능한 JavaScript 입자 효과, 색종이 조각 폭발 및 불꽃놀이 애니메이션을 쉽게 만들고 웹 사이트의 애니메이션 배경으로 사용하십시오. React.js, Vue.js(2.x 및 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot 및 웹 구성 요소에 사용할 수 있는 구성 요소를 사용할 준비가 되었습니다.






tsParticles - TypeScript 입자


파티클 생성을 위한 경량 TypeScript 라이브러리입니다. 종속성 없음(*), 브라우저 준비 및 호환 가능
React.js, Vue.js(2.x 및 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.js, Solid.js 및 웹 구성 요소




목차


⚠️⚠️ 이 읽어보기는 곧 출시될 v2를 참조합니다.
버전, read here v1 문서용 ⚠️⚠️

  • Use for your website
  • Library installation


  • Official components for some of the most used frameworks
  • Angular
  • Inferno
  • jQuery
  • Preact
  • ReactJS
  • RiotJS
  • SolidJS
  • Svelte
  • VueJS 2.x
  • VueJS 3.x
  • Web Components
  • WordPress


  • Presets
  • Big Circles
  • Bubbles
  • Confetti
  • Fire
  • Firefly
  • Fireworks
  • Fountain
  • Links
  • Sea Anemone
  • Snow
  • Stars
  • Triangles

  • Templates and Resources

  • Demo / Generator
  • Characters as particles
  • Mouse hover connections
  • Polygon mask
  • Animated stars
  • Nyan cat flying on scrolling stars
  • Background Mask particles

  • Video Tutorials
  • Migrating from Particles.js
  • Plugins/Customizations
  • Dependency Graphs
  • Sponsors

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


    설명서 및 개발 참조here 📖
    이 라이브러리는…

    View on GitHub

    좋은 웹페이지 즐겨찾기