這篇文章主要介紹了基于Particles.js如何制作超炫粒子動態(tài)背景效果,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
目前創(chuàng)新互聯(lián)公司已為1000+的企業(yè)提供了網(wǎng)站建設、域名、虛擬主機、網(wǎng)站托管維護、企業(yè)網(wǎng)站設計、廣水網(wǎng)站維護等服務,公司將堅持客戶導向、應用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長,共同發(fā)展。
好久沒登錄知乎,發(fā)現(xiàn)他們的登錄頁面粒子動態(tài)效果蠻炫的,查一下代碼用了Particles.js基于Canvas畫布創(chuàng)建粒子顆粒效果。
上圖
上圖:
感覺有比格,就照著弄了一個,玩玩。
github: https://github.com/VincentGarreau/particles.js/
操作過程:
網(wǎng)上有基本流程,可以參考一下,不過直接用在登錄頁面 會有小bug,需要調整下。
1、首先在頁面中引入particles.js文件。
<script src="js/particles.js"></script>
2、在頁面中使用一個div來作為放置粒子的容器。[一般放最底部,css 需要改進一下]
<div id="particles"></div> <style type="text/css"> #particles { position: absolute; top: 0; width: 100%; z-index: -1; //這個z-index 要是不設置 會對登錄表單的點擊產(chǎn)生干擾,會去搶風頭,不好好做一個安靜的背景。 background-color: #26AFE3; } </style>
3、加載配置文件: 網(wǎng)上講 用load()方法 還得弄個配置的json文件,光路徑 就搞殘了我。
參考官方demo http://codepen.io/VincentGarreau/pen/pnlso
直接在js里面寫配置
<script type="text/javascript"> // particlesJS.load('particles', './js/app/particles.json', function() { // console.log('callback - particles.js config loaded'); // }); particlesJS("particles", { "particles": { "number": { "value": 30, "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": 10, "random": true, "anim": { "enable": false, "speed": 50, "size_min": 0.1, "sync": false } }, "line_linked": { "enable": true, "distance": 300, "color": "#ffffff", "opacity": 0.4, "width": 2 }, "move": { "enable": true, "speed": 8, "direction": "none", "random": false, "straight": false, "out_mode": "out", "bounce": false, "attract": { "enable": false, "rotateX": 600, "rotateY": 1200 } } }, "interactivity": { "detect_on": "canvas", "events": { "onhover": { "enable": false, "mode": "repulse" }, "onclick": { "enable": false, "mode": "push" }, "resize": true }, "modes": { "grab": { "distance": 800, "line_linked": { "opacity": 1 } }, "bubble": { "distance": 800, "size": 80, "duration": 2, "opacity": 0.8, "speed": 3 }, "repulse": { "distance": 400, "duration": 0.4 }, "push": { "particles_nb": 4 }, "remove": { "particles_nb": 2 } } }, "retina_detect": true }); </script>
4,配置參數(shù) option 以及使用: option github 官網(wǎng)頁面就有詳情??刂屏W訑?shù)量 運動速度 什么的
particles 用起來還是有點問題的,在chrome 下載文件后再切換到這個頁面 就殘廢了。等解決方法。
感謝你能夠認真閱讀完這篇文章,希望小編分享的“基于Particles.js如何制作超炫粒子動態(tài)背景效果”這篇文章對大家有幫助,同時也希望大家多多支持創(chuàng)新互聯(lián),關注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關知識等著你來學習!
網(wǎng)站題目:基于Particles.js如何制作超炫粒子動態(tài)背景效果
當前地址:http://bm7419.com/article6/goeoig.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供做網(wǎng)站、域名注冊、品牌網(wǎng)站設計、微信小程序、網(wǎng)站收錄、面包屑導航
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)