Simple Animation For Background

Particles.js is a pure JavaScript plugin to draw animated, interactive particles on an HTML canvas element.

So, Let’s go!

Step 1: JS Library

https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.3/particles.min.js

Step 2: HTML
<div class="banner-area">
    <div class="container">

    </div>
    <div id="particles-js"></div>
</div>

Step 2: CSS

#particles-js {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

Step 3: Practicle JS

if(document.getElementById("particles-js")) particlesJS("particles-js", {
    "particles": {
        "number": {
            "value": 50, "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": 0.5, "random": false, "anim": {
                "enable": false, "speed": 1, "opacity_min": 0.1, "sync": false
            }
        }
        , "size": {
            "value": 5, "random": true, "anim": {
                "enable": false, "speed": 40, "size_min": 0.1, "sync": false
            }
        }
        , "line_linked": {
            "enable": true, "distance": 150, "color": "#ffffff", "opacity": 0.4, "width": 1
        }
        , "move": {
            "enable": true, "speed": 6, "direction": "none", "random": false, "straight": false, "out_mode": "out", "attract": {
                "enable": false, "rotateX": 600, "rotateY": 1200
            }
        }
    }
    , "interactivity": {
        "detect_on": "canvas", "events": {
            "onhover": {
                "enable": true, "mode": "repulse"
            }
            , "onclick": {
                "enable": true, "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
            }
            , "push": {
                "particles_nb": 4
            }
            , "remove": {
                "particles_nb": 2
            }
        }
    }
    , "retina_detect": true, "config_demo": {
        "hide_card": false, "background_color": "#b61924", "background_image": "", "background_position": "50% 50%", "background_repeat": "no-repeat", "background_size": "cover"
    }

});

The End!

Leave a Reply

Your email address will not be published. Required fields are marked *