Vue에서 Particles.js 라이브러리를 사용하는 방법

이번에는 vue에서 Particles.js 라이브러리를 사용하는 방법을 보여드리겠습니다. vue에서 Particles.js 라이브러리를 사용할 때 주의사항은 무엇인가요?

Zhihu 홈페이지 뒷면에 있는 파티클 애니메이션은 항상 멋있어 보였어요. 검색해 보니 Particle.js를 사용하여 작성된 것이었습니다. 마침 현재 프로젝트에서 Vue 프레임워크를 사용하고 있어서 두 사람이 함께 배웠습니다.

솔직히 이것만 잘 활용하면 제가 지금 쓰고 있는 프로젝트처럼 아주 멋진 페이지가 될 수 있을 것 같아요

헤헤~

particle.js 설치

npm install --save particles.js

particle.js 구성

1.data

이 데이터는 페이지의 입자 상태를 제어하는 ​​데 사용됩니다.

rreee

2.template

여기에 동적 입자가 표시됩니다.

rreee

3.script

DOM 트리가 포함되어 있기 때문에 마운팅이 완료된 후 Particle.js를 초기화해야 합니다. 첫 번째 매개변수 id는 템플릿에서 얻는 ID 이름입니다. 작성하려는 경우에는 입자입니다. 두 번째 매개변수는 데이터가 저장되는 경로입니다. 저는 개인적으로 상대 경로를 사용하는 것을 권장합니다.

rreee

4.style

{
"particles": {
 "number": {
 "value": 60,
 "density": {
  "enable": true,
  "value_area": 800
 }
 },
 "color": {
 "value": "#ffffff"
 },
 "shape": {
 "type": "circle",
 "stroke": {
  "width": 0,
  "color": "#000000"
 },
 "polygon": {
  "nb_sides": 5
 },
 "image": {
  "src": "img/github.svg",
  "width": 100,
  "height": 100
 }
 },
 "opacity": {
 "value": 0.5,
 "random": false,
 "anim": {
  "enable": false,
  "speed": 1,
  "opacity_min": 0.1,
  "sync": false
 }
 },
 "size": {
 "value": 3,
 "random": true,
 "anim": {
  "enable": false,
  "speed": 40,
  "size_min": 0.1,
  "sync": false
 }
 },
 "line_linked": {
 "enable": true,
 "distance": 150,
 "color": "#ffffff",
 "opacity": 0.4,
 "width": 1
 },
 "move": {
 "enable": true,
 "speed": 4,
 "direction": "none",
 "random": false,
 "straight": false,
 "out_mode": "out",
 "bounce": false,
 "attract": {
  "enable": false,
  "rotateX": 100,
  "rotateY": 1200
 }
 }
},
"interactivity": {
 "detect_on": "Window",
 "events": {
 "onhover": {
  "enable": true,
  "mode": "grab"
 },
 "onclick": {
  "enable": true,
  "mode": "push"
 },
 "resize": true
 },
 "modes": {
 "grab": {
  "distance": 140,
  "line_linked": {
  "opacity": 1
  }
 },
 "bubble": {
  "distance": 400,
  "size": 40,
  "duration": 2,
  "opacity": 8,
  "speed": 3
 },
 "repulse": {
  "distance": 200,
  "duration": 0.4
 },
 "push": {
  "particles_nb": 4
 },
 "remove": {
  "particles_nb": 2
 }
 }
},
"retina_detect": true
}

이 시점에서 언급되지 않은 가장 중요한 사항이 하나 있다는 것을 알게 될 것입니다. 바로 입자.js의 도입입니다. 사용 범위가 비교적 작은 경우 현재 vue 파일의 스크립트, 즉

<p id="particles"></p>

에 직접 도입할 수 있습니다. 아니면 관리가 어렵다고 생각되서 꼭 메인파일에 넣어두셔야 할 것 같아요

mounted(){
 particlesJS.load('id','path to your particles.data');
}

이 글의 사례를 읽으신 후 방법을 마스터하셨을 거라 생각합니다. 더 흥미로운 내용은 다른 관련 글도 참고해주세요. PHP 중국어 웹사이트!

추천 도서:

Three.js 사용법 상세 설명

angular cli 사용법 상세 설명

전체 페이지 플러그인 개발 전체 화면 페이지 전환 단계 상세 설명

위 내용은 Vue에서 Particles.js 라이브러리를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!