69 lines
25 KiB
JavaScript
69 lines
25 KiB
JavaScript
|
/* -----------------------------------------------
|
||
|
|
/* Author : Vincent Garreau - vincentgarreau.com
|
||
|
|
/* MIT license: http://opensource.org/licenses/MIT
|
||
|
|
/* Demo / Generator : vincentgarreau.com/particles.js
|
||
|
|
/* GitHub : github.com/VincentGarreau/particles.js
|
||
|
|
/* How to use? : Check the GitHub README
|
||
|
|
/* v2.0.0
|
||
|
|
/* ----------------------------------------------- */
|
||
|
|
function hexToRgb(e){var a=/^#?([a-f\d])([a-f\d])([a-f\d])$/i;e=e.replace(a,function(e,a,t,i){return a+a+t+t+i+i});var t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return t?{r:parseInt(t[1],16),g:parseInt(t[2],16),b:parseInt(t[3],16)}:null}function clamp(e,a,t){return Math.min(Math.max(e,a),t)}function isInArray(e,a){return a.indexOf(e)>-1}var pJS=function(e,a){var t=document.querySelector("#"+e+" > .particles-js-canvas-el");this.pJS={canvas:{el:t,w:t.offsetWidth,h:t.offsetHeight},particles:{number:{value:400,density:{enable:!0,value_area:800}},color:{value:"#fff"},shape:{type:"circle",stroke:{width:0,color:"#ff0000"},polygon:{nb_sides:5},image:{src:"",width:100,height:100}},opacity:{value:1,random:!1,anim:{enable:!1,speed:2,opacity_min:0,sync:!1}},size:{value:20,random:!1,anim:{enable:!1,speed:20,size_min:0,sync:!1}},line_linked:{enable:!0,distance:100,color:"#fff",opacity:1,width:1},move:{enable:!0,speed:2,direction:"none",random:!1,straight:!1,out_mode:"out",bounce:!1,attract:{enable:!1,rotateX:3e3,rotateY:3e3}},array:[]},interactivity:{detect_on:"canvas",events:{onhover:{enable:!0,mode:"grab"},onclick:{enable:!0,mode:"push"},resize:!0},modes:{grab:{distance:100,line_linked:{opacity:1}},bubble:{distance:200,size:80,duration:.4},repulse:{distance:200,duration:.4},push:{particles_nb:4},remove:{particles_nb:2}},mouse:{}},retina_detect:!1,fn:{interact:{},modes:{},vendors:{}},tmp:{}};var i=this.pJS;a&&Object.deepExtend(i,a),i.tmp.obj={size_value:i.particles.size.value,size_anim_speed:i.particles.size.anim.speed,move_speed:i.particles.move.speed,line_linked_distance:i.particles.line_linked.distance,line_linked_width:i.particles.line_linked.width,mode_grab_distance:i.interactivity.modes.grab.distance,mode_bubble_distance:i.interactivity.modes.bubble.distance,mode_bubble_size:i.interactivity.modes.bubble.size,mode_repulse_distance:i.interactivity.modes.repulse.distance},i.fn.retinaInit=function(){i.retina_detect&&window.devicePixelRatio>1?(i.canvas.pxratio=window.devicePixelRatio,i.tmp.retina=!0):(i.canvas.pxratio=1,i.tmp.retina=!1),i.canvas.w=i.canvas.el.offsetWidth*i.canvas.pxratio,i.canvas.h=i.canvas.el.offsetHeight*i.canvas.pxratio,i.particles.size.value=i.tmp.obj.size_value*i.canvas.pxratio,i.particles.size.anim.speed=i.tmp.obj.size_anim_speed*i.canvas.pxratio,i.particles.move.speed=i.tmp.obj.move_speed*i.canvas.pxratio,i.particles.line_linked.distance=i.tmp.obj.line_linked_distance*i.canvas.pxratio,i.interactivity.modes.grab.distance=i.tmp.obj.mode_grab_distance*i.canvas.pxratio,i.interactivity.modes.bubble.distance=i.tmp.obj.mode_bubble_distance*i.canvas.pxratio,i.particles.line_linked.width=i.tmp.obj.line_linked_width*i.canvas.pxratio,i.interactivity.modes.bubble.size=i.tmp.obj.mode_bubble_size*i.canvas.pxratio,i.interactivity.modes.repulse.distance=i.tmp.obj.mode_repulse_distance*i.canvas.pxratio},i.fn.canvasInit=function(){i.canvas.ctx=i.canvas.el.getContext("2d")},i.fn.canvasSize=function(){i.canvas.el.width=i.canvas.w,i.canvas.el.height=i.canvas.h,i&&i.interactivity.events.resize&&window.addEventListener("resize",function(){i.canvas.w=i.canvas.el.offsetWidth,i.canvas.h=i.canvas.el.offsetHeight,i.tmp.retina&&(i.canvas.w*=i.canvas.pxratio,i.canvas.h*=i.canvas.pxratio),i.canvas.el.width=i.canvas.w,i.canvas.el.height=i.canvas.h,i.particles.move.enable||(i.fn.particlesEmpty(),i.fn.particlesCreate(),i.fn.particlesDraw(),i.fn.vendors.densityAutoParticles()),i.fn.vendors.densityAutoParticles()})},i.fn.canvasPaint=function(){i.canvas.ctx.fillRect(0,0,i.canvas.w,i.canvas.h)},i.fn.canvasClear=function(){i.canvas.ctx.clearRect(0,0,i.canvas.w,i.canvas.h)},i.fn.particle=function(e,a,t){if(this.radius=(i.particles.size.random?Math.random():1)*i.particles.size.value,i.particles.size.anim.enable&&(this.size_status=!1,this.vs=i.particles.size.anim.speed/100,i.particles.size.anim.sync||(this.vs=this.vs*Math.random())),this.x=t?t.x:Math.random()*i.canvas.w,this.y=t?t.y:Math.random()*i.canvas.h,this.x>i.canvas.w-2*this.radius?this.x=this.x-this.radius:this.x<2*this.radius&&(this.x=this.x+this.radius),this.y>i.canvas.h-2*this
|
||
|
|
|
||
|
|
|
||
|
|
/*==============================================================
|
||
|
|
Particles
|
||
|
|
==============================================================*/
|
||
|
|
|
||
|
|
particlesJS("particles-js", {
|
||
|
|
"particles": {
|
||
|
|
"number": {
|
||
|
|
"value": 60,
|
||
|
|
"density": {"enable": true, "value_area": 1042.21783956259}
|
||
|
|
},
|
||
|
|
"color": {"value": "#e6e6e6"},
|
||
|
|
"shape": {
|
||
|
|
"type": "circle",
|
||
|
|
"stroke": {"width": 0, "color": "#000000"},
|
||
|
|
"polygon": {"nb_sides": 5},
|
||
|
|
"image": {"src": "img/github.svg", "width": 100, "height": 100}
|
||
|
|
},
|
||
|
|
"opacity": {
|
||
|
|
"value": 0.4734885849793636,
|
||
|
|
"random": false,
|
||
|
|
"anim": {"enable": false, "speed": 1, "opacity_min": 0.1, "sync": false}
|
||
|
|
},
|
||
|
|
"size": {
|
||
|
|
"value": 12.03412060865523,
|
||
|
|
"random": true,
|
||
|
|
"anim": {"enable": false, "speed": 40, "size_min": 0.1, "sync": false}
|
||
|
|
},
|
||
|
|
"line_linked": {"enable": false, "distance": 64.13648243462092, "color": "#ffffff", "opacity": 0.4, "width": 1},
|
||
|
|
"move": {
|
||
|
|
"enable": true,
|
||
|
|
"speed":3,
|
||
|
|
"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": 400, "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": false
|
||
|
|
});
|
||
|
|
|