menu
Ad goes here

Saturday, 1 July 2017

How to create interactive website background using particles.js?

A simple way to create interactive background
Particles.js is a lightweight JavaScript library which can help you to create lots of moving tiny particles to make your website background interactive. It’s super easy to use and you need only following things:
  • particles.js library
  • A div using an ID
  • Few line of JS and CSS code

Installation and uses:
1. First you have to include the library CDN link or you can download and host in your server.
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

2. Create DOM element using an ID where you wanted to show the tiny moving particles.
<div id="particles-js">
</div>

3. Now you just have to add one line of JS and CSS code to see the result.
JS code:
particlesJS();
CSS code:
#particles-js {
  background: #ff0000;
}

That's it.

Looking for more customization?
Here are few more custom option from JS to change the particles sizes, animation speed and many more.
particlesJS("particles-js", {
  "particles": {
    "number": {
      "value": 180,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      }
    },
    "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": 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",
      "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
});



particles-js-from-24xhtml tutorial website

4 comments:

  1. I like this website pretty much. Great info. Hi and thanks for the web blogs. I am really happy to read this post..thanks for giving us interesting info. I appreciate this post. I used to be able to find nice information from your content. college essays

    ReplyDelete
  2. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or learn thru JavaScript Online Training India. Nowadays JavaScript has tons of job opportunities on various vertical industry.

    ReplyDelete
  3. Splendidly communicated. Would go for different online journals by this author.
    web consultant

    ReplyDelete
  4. Thanks for providing the coding for website design. Looking for web design then Creative Web Design Service California provides the best website design service at affordable price.

    ReplyDelete

Books for you (Crafted with )