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

13 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
  5. This is actually the kind of information I have been trying to find. Thank you for writing this information. website build

    ReplyDelete
  6. I am impressed with your work which you have done in this article. Your article is very informative about website designing and this code is very useful to create a good website background. If you are looking for the best website designing company in Manchester NH, Visit website design Manchester NH

    ReplyDelete
  7. I am looking for and I love to post a comment that "The content of your post is awesome" Great work webceed UK

    ReplyDelete
  8. This blog is so important. A present for the blog readers.
    mason soiza

    ReplyDelete
  9. Particles.js is a lightweight JavaScript library which can help you to create lots of moving tiny particles to make your website background interactive. MS-202 dumps

    ReplyDelete
  10. Thank you because you have been willing to share information with us. we will always appreciate all you have done here because I know you are very concerned with our. SEO Geoptimaliseerd Webdesign met Hoge ROI

    ReplyDelete
  11. It was a decent post to be sure. I completely delighted in understanding it in my lunch time. Will definitely come and visit this blog all the more frequently. Much obliged for sharing. wix review

    ReplyDelete
  12. You have a good point here!I totally agree with what you have said!!Thanks for sharing your views...hope more people will read this article!!! freelance web designer london

    ReplyDelete