JS 라 이브 러 리 의 Particles.js vue 에서 의 활용 사례 분석

알 고 있 는 첫 페이지 뒤의 입자 동 효 는 항상 시 크 하 다 고 생각 합 니 다.찾 아 보 니 particles.js 로 작 성 된 것 같 습 니 다.마침 현재 프로젝트 는 vue 프레임 워 크 를 이용 하여 두 개 를 한데 모 아 배 웠 다.
이 치 를 따 져 보면,이것 을 잘 쓰 면,페이지 는 매우 멋 있 을 수 있다.예 를 들 어 내 가 지금 쓴 항목 과 같다.

쿨 한 로그 인 페이지
히히~
particles.js 설치npm install --save particles.jsparticles.js 설정
1.data
이 data 는 입자 가 페이지 에 나타 나 는 상 태 를 제어 하 는 데 사 용 됩 니 다.

{
"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
}

2.template
이것 이 바로 동적 입자 가 보 여줄 위치 다.

<div id="particles"></div>

3.script
dom 트 리 와 관련 되 어 있 기 때문에 마 운 트 가 끝 난 후에 particles.js 를 초기 화해 야 합 니 다.첫 번 째 매개 변수 id 는 template 에서 id 이름 을 얻 는 것 입 니 다.제 가 쓰 려 면 particles 입 니 다.두 번 째 매개 변 수 는 data 가 저장 하 는 경로 입 니 다.개인 적 으로 상대 경 로 를 사용 하 는 것 을 권장 합 니 다.

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

4.style

#particles{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #b61924;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

여기까지 말 하면 가장 중요 한 점 이 하나 더 있 습 니 다.네,바로 particles.js 의 도입 입 니 다.사용 범위 가 시간 을 비교 하면 현재 vue 파일 의 script 에 직접 도입 할 수 있 습 니 다.즉,

//vue  
import particles from 'particles.js'

아니면 관리 가 안 된다 고 생각 하 시 면 main 파일 에 넣 으 셔 도 됩 니 다.

//main  
import particles from 'particles.js'
Vue.use(particles)

마지막 으로 나타 난 효 과 는 다음 과 같다.

총결산
위 에서 말 한 것 은 편집장 이 소개 한 JS 라 이브 러 리 의 Particles.js 가 vue 에서 의 활용 사례 분석 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!