北京pk10直播

簡單的星空粒子效果

所屬分類:其他,UI-動畫效果,背景

 31301  265  查看評論 (16)
分享到微信朋友圈
X
簡單的星空粒子效果 ie兼容9

導入particles.min.js 與  app.js

app.js 是參數配置文件

配置文件參數說明我都幫你們寫好了,配置完可以自己把注釋刪了

{
 "particles": {
   "number": {
     "value": 160,//數量
     "density": {
       "enable": true, //啟用粒子的稀密程度
       "value_area": 800 //區域散布密度大小
     }
   },
   "color": {
     "value": "#ffffff" //原子的顏色
   },
   "shape": {
     "type": "circle", //原子的形狀 "circle" ,"edge" ,"triangle" ,"polygon" ,"star" ,"image" ,["circle", "triangle", "image"]
     "stroke": {
       "width": 0, //原子的寬度
       "color": "#000000" //原子顏色
     },
     "polygon": {
       "nb_sides": 5 // 原子的多邊形邊數
     },
     "image": {
       "src": "img/github.svg", // 原子的圖片可以使用自定義圖片 "assets/img/yop.svg" , "http://mywebsite.com/assets/img/yop.png"
       "width": 100, //圖片寬度
       "height": 100 //圖片高度
     }
   },
   "opacity": {
     "value": 1, //不透明度
     "random": true, //隨機不透明度
     "anim": {
       "enable": true, //漸變動畫
       "speed": 1, // 漸變動畫速度
       "opacity_min": 0, //漸變動畫不透明度
       "sync": true 
     }
   },
   "size": {
     "value": 3, //原子大小
     "random": true, // 原子大小隨機
     "anim": {
       "enable": false, // 原子漸變
       "speed": 4, //原子漸變速度
       "size_min": 0.3, 
       "sync": false
     }
   },
   "line_linked": {
     "enable": false, //連接線
     "distance": 150, //連接線距離
     "color": "#ffffff", //連接線顏色
     "opacity": 0.4, //連接線不透明度
     "width": 1 //連接線的寬度
   },
   "move": {
     "enable": true, //原子移動
     "speed": 1, //原子移動速度
     "direction": "none", //原子移動方向   "none" ,"top" ,"top-right" ,"right" ,"bottom-right" ,"bottom" ,"bottom-left" ,"left" ,"top-left"
     "random": true, //移動隨機方向
     "straight": false, //直接移動
     "out_mode": "out", //是否移動出畫布
     "bounce": false, //是否跳動移動
     "attract": { 
       "enable": false, // 原子之間吸引
       "rotateX": 600, //原子之間吸引X水平距離
       "rotateY": 600  //原子之間吸引Y水平距離
     }
   }
 },
 "interactivity": {
   "detect_on": "canvas", //原子之間互動檢測 "canvas", "window"
   "events": {
     "onhover": {
       "enable": true, //懸停
       "mode": "bubble" //懸停模式      "grab"抓取臨近的,"bubble"泡沫球效果,"repulse"擊退效果,["grab", "bubble"]
     },
     "onclick": {
       "enable": false,  //點擊效果
       "mode": "repulse"  //點擊效果模式   "push" ,"remove" ,"bubble" ,"repulse" ,["push", "repulse"]
     },
     "resize": true // 互動事件調整
   },
   "modes": {
     "grab": {
       "distance": 100, //原子互動抓取距離
       "line_linked": { 
         "opacity": 0.8  //原子互動抓取距離連線不透明度
       }
     },
     "bubble": {
       "distance": 250, //原子抓取泡沫效果之間的距離
       "size": 4, // 原子抓取泡沫效果之間的大小
       "duration": 2, //原子抓取泡沫效果之間的持續事件
       "opacity": 1, //原子抓取泡沫效果透明度
       "speed": 3 
     },
     "repulse": {
       "distance": 400, //擊退效果距離
       "duration": 0.4 //擊退效果持續事件
     },
     "push": {
       "particles_nb": 4 //粒子推出的數量
     },
     "remove": {
       "particles_nb": 2
     }
   }
 },
 "retina_detect": true
}


相關插件-動畫效果,背景

Google loading 純CSS3加載動畫特效(部分原創)

Google風格為主題,運用CSS3實現加載動畫特效
  動畫效果
 12033  160

Google Doodle粘土動畫

Google Doodle粘土動畫
  動畫效果
 19637  185

html5 canvas粒子星空

html5 canvas鼠標跟隨粒子星空動畫
  動畫效果
 41953  415

基于jQuery實現的數字滾動插件(原創)

實現過程簡單,支持設置總時長、總數以及運動的形式,本插件基于jQuery的animate方法,簡單易懂,方便使用
  動畫效果
 15759  152

討論這個項目(16)回答他人問題或分享插件使用方法獎勵jQ幣

    如此『傲嬌』 0
    2019/8/26 16:57:22
    大神,原子圖片路徑轉換成本地自定義圖片,為什么沒有反應呢? 回復
    Kyle╃? 0
    2019/4/11 18:54:02
    怎么把它當做背景啊
        西瓜0
        2019/4/12 0:11:54
        用div浮動層,放在它之上就行了。
    回復
    沒有尾巴的小猴 0
    2019/1/29 11:17:37
    s=t.getElementsByClassName(i) 放到頁面里報錯
        木有魚丸呀。0
        2019/7/25 12:31:25
        大佬,這個問題解決了嗎?
    回復
    ??tom 0
    2018/12/4 11:00:15
    大神,有個問題啊,,他canvas高度~~怎么固定在450啊。。 回復
    溫柔江湖氣 0
    2018/11/27 18:22:46
    引入了兩個JS 和css文件還是不能顯示,怎么辦啊 回復
    xlw9901 0
    2018/11/14 1:50:35
    大神,請問怎么把他當作背景呢,另外一個登陸插件沒太看懂怎么做背景的。。。求救!!
        0
        2018/11/19 9:31:00
        留下你的q?
        Kyle╃?0
        2019/4/11 18:14:54
        怎么做背景啊
    回復
    cqlilongzhu 0
    2018/9/26 11:18:59
    很不錯 注釋很完善
        pop boy0
        2018/10/15 14:37:39
        怎么把這個當作我html的背景呢
        黑笙0
        2018/11/13 14:46:17
        同問怎么當作背景
        0
        2018/11/13 17:52:32
        參考我另一個登錄插件,里面有用這個做背景
    回復
    ?永遠都忘不了你的微笑? 0
    2018/9/18 17:29:25
    虛構丶 0
    2018/9/17 17:03:49
    好舒服啊,這種感覺 回復
取消回復
北京pk10直播