導入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
}
效果預覽:http://www.jquery66.com/demos/css3/css3201932902/index.html
下載地址:https://u18725144.ctfile.com/fs/18725144-357335022