1.8 HEADER - STARS WITH PARTICLESJS

[mastersly]

Preview

<script type="text/javascript">
particlesJS("particles-js", {
? "particles": {
? ? "number": {
? ? ? "value": 355,
? ? ? "density": {
? ? ? ? "enable": true,
? ? ? ? "value_area": 789.1476416322727
? ? ? }
? ? },
? ? "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": 0.48927153781200905,
? ? ? "random": false,
? ? ? "anim": {
? ? ? ? "enable": true,
? ? ? ? "speed": 0.2,
? ? ? ? "opacity_min": 0,
? ? ? ? "sync": false
? ? ? }
? ? },
? ? "size": {
? ? ? "value": 2,
? ? ? "random": true,
? ? ? "anim": {
? ? ? ? "enable": true,
? ? ? ? "speed": 2,
? ? ? ? "size_min": 0,
? ? ? ? "sync": false
? ? ? }
? ? },
? ? "line_linked": {
? ? ? "enable": false,
? ? ? "distance": 150,
? ? ? "color": "#ffffff",
? ? ? "opacity": 0.4,
? ? ? "width": 1
? ? },
? ? "move": {
? ? ? "enable": true,
? ? ? "speed": 0.2,
? ? ? "direction": "none",
? ? ? "random": true,
? ? ? "straight": false,
? ? ? "out_mode": "out",
? ? ? "bounce": false,
? ? ? "attract": {
? ? ? ? "enable": false,
? ? ? ? "rotateX": 600,
? ? ? ? "rotateY": 1200
? ? ? }
? ? }
? },
? "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": 83.91608391608392,
? ? ? ? "size": 1,
? ? ? ? "duration": 3,
? ? ? ? "opacity": 1,
? ? ? ? "speed": 3
? ? ? },
? ? ? "repulse": {
? ? ? ? "distance": 200,
? ? ? ? "duration": 0.4
? ? ? },
? ? ? "push": {
? ? ? ? "particles_nb": 4
? ? ? },
? ? ? "remove": {
? ? ? ? "particles_nb": 2
? ? ? }
? ? }
? },
? "retina_detect": true
});
</script>

In the same template find your Header container,It may be different in other themes

<div class="header-bg"></div>

<!-- particles.js container --> 
<div id="particles-js"></div>

<!-- particles.js lib - https://github.com/VincentGarreau/particles.js --> 
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

[/size]
add this

/* ---- reset ---- */

body {
? margin: 0;
? background-color: #17182f;
}

canvas {
? display: block;
? vertical-align: bottom;
}


/* ---- particles.js container ---- */

#particles-js {
? position: absolute;
? width: 100%;
? height: 100%;
}

By:Johan
[/hide]

 

[Corona]

Thank you bro

 

[_B_]

Thank you!

 

[Negative]

Nice tutorial!

 

[soumikr]

thanks for this nice tutorial