Vue.js(2.x 및 3.x)에서 아름다운 입자 효과를 만드는 방법
30944 단어 vuetutorialjavascriptwebdev
나도 저런 파티클 효과 갖고싶다!!
멋진 파티클을 보았고 Vue.js 프로젝트에서 이와 같은 것을 원하십니까?
tsParticles Vue.js 2.x 또는 3.x 구성 요소를 사용하여 추가하는 방법을 살펴보겠습니다.
템플릿 사용 준비
게시물을 읽기에 너무 게을러서 작업 샘플을 원하십니까?
여기 있어요:
Vue JS 2.x( 입자.vue )
Vue JS 3.x( 입자.vue3 )
커뮤니티 프로젝트
공유할 멋진 프로젝트가 있거나 초보자를 위한 아름다운 샘플이 있는 경우 tsParticles templates repository에서 자유롭게 PR을 열 수 있습니다.
인기 있는 Vue.js 2.x 버전부터 시작하겠습니다.
particles.vue npm 패키지.Vue.js 2.x
설치
yarn add particles.vue
용법
import Particles from "particles.vue";
// this adds the particles plugin to Vue.js
Vue.use(Particles);
데모 구성
<template>
<div id="app">
<!-- use this tag to add a particle container with an external configuration -->
<Particles
id="tsparticles"
:particlesInit="particlesInit"
:particlesLoaded="particlesLoaded"
url="http://foo.bar/particles.json"
/>
<!-- or -->
<!-- use this tag to add a particle container with an inline configuration -->
<Particles
id="tsparticles"
:particlesInit="particlesInit"
:particlesLoaded="particlesLoaded"
: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
},
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 오류
TypeScript를 사용 중이고 Particles 플러그인을 가져오거나 사용하는 동안 오류가 있는 경우 이전 코드 앞에 다음 가져오기를 추가해 보세요.
declare module "particles.vue";
새로운 Vue.js 3.x 버전으로 계속 진행하겠습니다.
particles.vue3 npm 패키지.Vue.js 3.x
설치
yarn add particles.vue3
용법
import Particles from "particles.vue3";
// this will add the particles plugin to your Vue.js app
createApp(App).use(Particles)
데모 구성
<template>
<div id="app">
<!-- use this tag to add a particle container with an external configuration -->
<Particles
id="tsparticles"
:particlesInit="particlesInit"
:particlesLoaded="particlesLoaded"
url="http://foo.bar/particles.json"
/>
<!-- or -->
<!-- use this tag to add a particle container with an inline configuration -->
<Particles
id="tsparticles"
:particlesInit="particlesInit"
:particlesLoaded="particlesLoaded"
: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
},
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 오류
TypeScript를 사용 중이고 Particles 플러그인을 가져오거나 사용하는 동안 오류가 있는 경우 이전 코드 앞에 다음 가져오기를 추가해 보세요.
declare module "particles.vue3";
시민
데모 웹사이트는 here입니다.
https://particles.js.org
능동적으로 유지 관리되고 업데이트되는 CodePen 모음도 있습니다here.
https://codepen.io/collection/DPOage
관련 게시물
tsParticles로 아름다운 색종이 애니메이션을 만드는 방법
Matteo Bruni ・ 2021년 3월 20일 ・ 4분 읽기
#javascript
#showdev
#tutorial
#html
Particles.vue3 출시! Vue.js 3.x용 파티클 애니메이션
Matteo Bruni ・ 2020년 9월 21일 ・ 2분 읽기
#vue
#showdev
#news
#javascript
Vue.js에서 입자 애니메이션을 만드는 방법
Matteo Bruni ・ 2020년 8월 6일 ・ 2분 읽기
#vue
#javascript
#tutorial
#showdev
tsParticle 사용 방법
Matteo Bruni ・ 2020년 7월 25일 ・ 2분 읽기
#tutorial
#javascript
#html
#showdev
tsParticles 튜토리얼
Matteo Bruni ・ 2020년 6월 10일 ・ 8분 읽기
#typescript
#javascript
#tutorial
#webdev
Particles.js가 아닌 tsParticles를 사용해야 하는 5가지 이유
Matteo Bruni ・ 2020년 3월 13일 ・ 2분 읽기
#javascript
#typescript
#showdev
#tutorial
Particles.js에서 tsParticles로 마이그레이션
Matteo Bruni ・ 2020년 3월 15일 ・ 2분 읽기
#javascript
#typescript
#tutorial
#showdev
프로젝트가 마음에 들고 이를 지원하고 싶다면 GitHub에 별표를 남겨주세요.
마테브루니 / 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
Official components for some of the most used frameworks
Presets
Demo / Generator
웹사이트에서 사용하시겠습니까?
설명서 및 개발 참조here 📖
이 라이브러리는…
View on GitHub
Reference
이 문제에 관하여(Vue.js(2.x 및 3.x)에서 아름다운 입자 효과를 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/tsparticles/how-to-create-beautiful-particles-effect-in-vue-js-2-x-and-3-x-27d8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
