particle.vue3

2.x 구성 요소는 호환되지 않으므로 Particles.vue3은 Vue.js 3.x용 새 구성 요소tsParticles입니다.

이제 Vue.js 3.x에서도 멋진 파티클 애니메이션을 쉽게 사용할 수 있습니다!!



공식tsParticles VueJS 3.x 구성 요소

설치

```쉘 스크립트
원사 입자 추가.vue3

## Usage



```javascript
import Particles from "particles.vue3";

createApp(App).use(Particles)

데모 구성

<template>
  <div id="app">
    <Particles
      id="tsparticles"
      :options="{
            background: {
                color: {
                    value: '#0d47a1'
                }
            },
            fpsLimit: 60,
            interactivity: {
                detectsOn: 'canvas',
                events: {
                    onClick: {
                        enable: true,
                        mode: 'push'
                    },
                    onHover: {
                        enable: true,
                        mode: 'repulse'
                    },
                    resize: true
                },
                modes: {
                    bubble: {
                        distance: 400,
                        duration: 2,
                        opacity: 0.8,
                        size: 40,
                        speed: 3
                    },
                    push: {
                        quantity: 4
                    },
                    repulse: {
                        distance: 200,
                        duration: 0.4
                    }
                }
            },
            particles: {
                color: {
                    value: '#ffffff'
                },
                links: {
                    color: '#ffffff',
                    distance: 150,
                    enable: true,
                    opacity: 0.5,
                    width: 1
                },
                collisions: {
                    enable: true
                },
                move: {
                    direction: 'none',
                    enable: true,
                    outMode: 'bounce',
                    random: false,
                    speed: 6,
                    straight: false
                },
                number: {
                    density: {
                        enable: true,
                        value_area: 800
                    },
                    value: 80
                },
                opacity: {
                    value: 0.5
                },
                shape: {
                    type: 'circle'
                },
                size: {
                    random: true,
                    value: 5
                }
            },
            detectRetina: true
        }"
    />
  </div>
</template>

TypeScript 오류

Particles 플러그인을 가져오거나 사용하는 동안 TypeScript가 오류를 반환하는 경우 이전 코드 앞에 다음 가져오기를 추가해 보세요.

declare module "particles.vue3";

시민

데모 웹사이트는 here입니다.

https://particles.matteobruni.it

능동적으로 유지 관리되고 업데이트되는 CodePen 컬렉션도 있습니다here.

https://codepen.io/collection/DPOage

마테브루니 / tsparticles

tsParticles - 파티클 애니메이션을 웹사이트에 쉽게 추가할 수 있습니다. React, Vue, Angular, Svelte, jQuery, Preact, Inferno와도 호환 가능

tsParticles - TypeScript 입자

파티클 생성을 위한 경량 TypeScript 라이브러리입니다. 종속성 무료(*) 및 브라우저 준비!
Particles.js TypeScript로 변환, 종속성 무료(*), 새롭고 멋진 😎 기능으로 개선되고 다양한 버그가 수정되어 활발하게 유지되고 있습니다!

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

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

View on GitHub