JS庫中的Particles.js在vue上的運(yùn)用案例分析
知乎的首頁后面的粒子動效總覺得很炫酷，搜了一下，發(fā)現(xiàn)是用particles.js編寫的。剛好目前的項(xiàng)目是利用vue框架的，兩個湊在一起學(xué)了。
講道理，這個用得好的話，頁面是可以很酷的，譬如我現(xiàn)在寫的項(xiàng)目
酷酷的登錄頁
嘻嘻~
安裝particles.js
npm install --save particles.js
配置particles.js
1.data
這個data是用于控制粒子在頁面中所呈現(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
這個就是動態(tài)粒子要展示的位置。
<div id="particles"></div>
3.script
因?yàn)樯婕暗絛om樹，所以必須在掛載結(jié)束后初始化particles.js。第一個參數(shù)id就是你在template上取得id名，像我要寫的話就是particles。第二個參數(shù)是你的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%;
}
講到這里會發(fā)現(xiàn)，還有一個最重要的點(diǎn)沒講出來，恩，就是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庫中的Particles.js在vue上的運(yùn)用案例分析，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
WordPress中鼠標(biāo)懸停顯示和隱藏評論及引用按鈕的實(shí)現(xiàn)
這篇文章主要介紹了WordPress中鼠標(biāo)懸停顯示和隱藏評論及引用按鈕的實(shí)現(xiàn),順帶顯示和隱藏評論者信息的實(shí)現(xiàn)方法,非常實(shí)用,需要的朋友可以參考下2016-01-01
JS獲取瀏覽器地址欄的多個參數(shù)值的任意值實(shí)例代碼
本文通過實(shí)例代碼給大家介紹了JS獲取瀏覽器地址欄的多個參數(shù)值的任意值，代碼簡單易懂，非常不錯，具有一定的參考借鑒價(jià)值，需要的的朋友參考下吧2018-07-07
JS判斷來路是否是百度等搜索索引進(jìn)行彈窗或自動跳轉(zhuǎn)的實(shí)現(xiàn)代碼
這篇文章主要介紹了JS判斷來路是否是百度等搜索索引進(jìn)行彈窗或自動跳轉(zhuǎn)的實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2016-10-10
使用3D引擎threeJS實(shí)現(xiàn)星空粒子移動效果
這篇文章主要為大家詳細(xì)介紹了使用3D引擎threeJS實(shí)現(xiàn)星空粒子移動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
ECharts是一個使用JavaScript實(shí)現(xiàn)的開源可視化庫,涵蓋各行業(yè)圖表,滿足各種需求,下面這篇文章主要給大家介紹了如何從零開始畫echarts地圖的相關(guān)資料,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了詳解JSON和JSONP劫持以及解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
JavaScript之IE的fireEvent方法詳細(xì)解析
剛開始我以為是會跟平時(shí)使用onclick()一樣，沒想到最近在寫javascript入門ppt的時(shí)候發(fā)現(xiàn)了，原來自己太自以為是了！看來還有很多javascript的細(xì)節(jié)沒有掌握好啊2013-11-11
javascript DOM對象的學(xué)習(xí)實(shí)例代碼
javascript DOM對象的學(xué)習(xí)實(shí)例代碼2009-06-06
微信小程序開發(fā)實(shí)用技巧之?dāng)?shù)據(jù)傳遞和存儲
數(shù)據(jù)傳遞與存儲是我們在日常開發(fā)中遇到的再正常不過的一個需求， 這篇文章主要給大家介紹了關(guān)于微信小程序開發(fā)實(shí)用技巧之?dāng)?shù)據(jù)傳遞和存儲的相關(guān)資料，需要的朋友可以參考下2021-05-05
Knockoutjs 學(xué)習(xí)系列(二)花式捆綁
這篇文章主要介紹了Knockoutjs 學(xué)習(xí)系列(二)花式捆綁 的相關(guān)資料,主要介紹了knockoutjs中各種綁定的使用方法，非常不錯具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06