Particles Interactive Cellular Background

This is an easy and awesome to use pattern. It is the first code pattern to be introduced to sdg and its really frikkin cool. It’s so cool we’re using it on our homepage and still pulling an “A” speed rating… WTF?

Let’s get into into it.

It’s a combination of js/css with some very limited markup. This is great for keeping things isolated. We use this on our homepage and why would we want this to be included on every page? If we want to do this right, we separate things and make sure that our includes are only being called on the page that matters. In this case it’s the homepage of our site.

The original idea was posted here by Vincent Garreau who should receive any credit for the writing of the code. Here is his codepen:

What I did was to include an html section for the yootheme pro components and add the following code to that section:

<script type="text/javascript" src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<style>
#particles-js {
  position: absolute;
  width: 100%;
  height: 800px;
  background-color: #fbf6ed;
  background-image: url("");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
    z-index:0;
    top:0;
    left:0;

}
</style>
<div id="particles-js"></div>
<script>
particlesJS("particles-js", {
  "particles": {
    "number": {
      "value": 100,
      "density": {
        "enable": true,
        "value_area": 1000
      }
    },
    "color": {
      "value": "#111"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#ffffff"
      },
      "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": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 150,
      "color": "#111",
      "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>Code language: HTML, XML (xml)

Now add a div with an id of ‘particles-js’ somewhere on the page. Once you have this in place on your site, (We use it for a background on the homepage) you can alter the html and css to suit your needs. Make sure to keep the script include for particles.js which does the heavy lifting in this although it should be called light cause it’s blazing fast, just like I like it.

In our case we had to add some extra build out in the css and markup to accommodate the new absolute positioning taking up the whole top section of the page. (Add some relative positioning)

Depending on your markup, mess around with z-index of elements to get your stacking order working correctly.

Wrap Up

So what we have here is an easy to use html snippet that can create some interesting effects like the one we used on our homepage this month. There’s really lot’s of ways you can implement this code and the variables can be played with to alter the effects. I like how it engages the user with interest about connections with the obvious connection to connecting with other users on our system or any system that simulates connections.