Made with particles.js, a lightweight JavaScript library for creating particles
A Pen by royal martin-navidad on CodePen.
<!-- particles.js container --> <div id="particles-js"></div> <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <!-- stats.js lib --> <script src="http://threejs.org/examples/js/libs/stats.min.js"></script> |
Made with particles.js, a lightweight JavaScript library for creating particles
A Pen by royal martin-navidad on CodePen.
particlesJS("particles-js", { | |
particles: { | |
number: { value: 160, 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: 1, | |
random: true, | |
anim: { enable: true, speed: 1, opacity_min: 0, sync: false } | |
}, | |
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", | |
random: true, | |
straight: false, | |
out_mode: "out", | |
bounce: false, | |
attract: { enable: false, rotateX: 600, rotateY: 600 } | |
} | |
}, | |
interactivity: { | |
detect_on: "canvas", | |
events: { | |
onhover: { enable: true, mode: "bubble" }, | |
onclick: { enable: true, mode: "push" }, | |
resize: true | |
}, | |
modes: { | |
grab: { distance: 400, line_linked: { opacity: 1 } }, | |
bubble: { | |
distance: 158.35505639876231, | |
size: 12.181158184520177, | |
duration: 6.0905790922600875, | |
opacity: 0.016241544246026904, | |
speed: 3 | |
}, | |
repulse: { distance: 414.159378273686, duration: 0.4 }, | |
push: { particles_nb: 4 }, | |
remove: { particles_nb: 2 } | |
} | |
}, | |
retina_detect: true | |
}); |
/* ---- reset ---- */ | |
body { | |
margin: 0; | |
font: normal 75% Arial, Helvetica, sans-serif; | |
} | |
canvas { | |
display: block; | |
vertical-align: bottom; | |
} /* ---- particles.js container ---- */ | |
#particles-js { | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
background-color: #000000; | |
opacity: 0.05; | |
filter: alpha(opacity=0); | |
background-image: url(""); | |
background-repeat: no-repeat; | |
background-size: 100; | |
background-position: 50% 20; | |
} |