欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS庫(kù)中的Particles.js在vue上的運(yùn)用案例分析

 更新時(shí)間：2017年09月13日 10:49:01   投稿：mrr  
這篇文章主要介紹了JS庫(kù)中的Particles.js在vue上的運(yùn)用案例分析,需要的朋友可以參考下

知乎的首頁(yè)后面的粒子動(dòng)效總覺得很炫酷，搜了一下，發(fā)現(xiàn)是用particles.js編寫的。剛好目前的項(xiàng)目是利用vue框架的，兩個(gè)湊在一起學(xué)了。

講道理，這個(gè)用得好的話，頁(yè)面是可以很酷的，譬如我現(xiàn)在寫的項(xiàng)目

酷酷的登錄頁(yè)

嘻嘻~

安裝particles.js

npm install --save particles.js

配置particles.js

1.data

這個(gè)data是用于控制粒子在頁(yè)面中所呈現(xiàn)的狀態(tài)。

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

這個(gè)就是動(dòng)態(tài)粒子要展示的位置。

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

3.script

因?yàn)樯婕暗絛om樹，所以必須在掛載結(jié)束后初始化particles.js。第一個(gè)參數(shù)id就是你在template上取得id名，像我要寫的話就是particles。第二個(gè)參數(shù)是你的data存放的路徑，個(gè)人建議使用相對(duì)路徑。

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%;
}

講到這里會(huì)發(fā)現(xiàn)，還有一個(gè)最重要的點(diǎn)沒講出來(lái)，恩，就是particles.js 的引入。當(dāng)你的使用范圍比較小時(shí)，可以直接在當(dāng)前vue文件的script中引入，即

//vue文件
import particles from 'particles.js'

又或者你覺得這樣不好管理，一定要放在main文件中也可以

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

最后呈現(xiàn)的效果如下

總結(jié)

以上所述是小編給大家介紹的JS庫(kù)中的Particles.js在vue上的運(yùn)用案例分析，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論