Skip to content

Instantly share code, notes, and snippets.

@u01jmg3

u01jmg3/particles.html

Last active April 12, 2019 15:31
Show Gist options
  • Save u01jmg3/0e289efba86c1a80913a247e7bfa3daf to your computer and use it in GitHub Desktop.
Save u01jmg3/0e289efba86c1a80913a247e7bfa3daf to your computer and use it in GitHub Desktop.
Download ZIP
Particles
Raw
particles.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Particles</title>
<style>body { background-color: #1a252f }</style>
</head>
<body>
<div id="particles-js"></div>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
particlesJS('particles-js', {
'particles': {
'number': {
'value': 150,
'density': {
'enable': true,
'value_area': 800,
}
},
'color': {
'value': '#fff',
},
'shape': {
'type': 'circle',
'stroke': {
'width': 0,
'color': '#fff',
},
'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': 3,
'random': true,
'anim': {
'enable': false,
'speed': 1,
'size_min': 0.1,
'sync': false,
}
},
'line_linked': {
'enable': true,
'distance': 150,
'color': '#fff',
'opacity': 0.4,
'width': 1,
},
'move': {
'enable': true,
'speed': 2,
'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': true,
'mode': 'grab',
},
'onclick': {
'enable': true,
'mode': 'push',
},
'resize': true,
},
'modes': {
'grab': {
'distance': 140,
'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': true,
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment