title: Css transition effects very slow in chrome
body: <p>First of all, sorry for my english.</p>
  
  <p>I'm building a website using django 1.11. And, ofc, using css to make it look better. Also I chose to use css grid as layout system.</p>
  
  <p>But CSS transition effects very slow in browser except Firefox (just hover effect for links).
  Everything works perfect in firefox. However, nothing works properly in other browsers. I have tested on latest versions of opera, chrome. </p>
  
  <p>Transition effects in chrome is very slow. In opera it is barely moving.</p>
  
  <p>I tried to fix it for few days. I read about transitions, transforms, animations in CSS. But i still can't find where the problem is.</p>
  
  <p>After all this days I'm thinking this bug is somewhere in CSS grid, because I reduced number of nested css grid's containers and animation played a little bit faster. Same thing happened when I just comment some block (like carousel). But still very slow. </p>
  
  <p>Why everything works perfect in firefox? What should I do to fix this for other browsers? I can't and don't want to release buggy crap. Please, show me where did i go wrong.</p>
  
  <p>There is generated html code:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport"
            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="/static/main/css/main.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
      &lt;link rel="stylesheet" href="/static/main/css/index.css" type="text/css"&gt;
      &lt;script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'&gt;&lt;/script&gt;
      &lt;script src='https://rawgit.com/JulianLaval/canvas-particle-network/master/particle-network.min.js'&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="header"&gt;
          &lt;div id="particle-canvas" class="particle-canvas"&gt;&lt;/div&gt;
          &lt;a href="/" class="btn home"&gt;big home page button&lt;/a&gt;
          &lt;a href="/service/" class="btn service"&gt;service&lt;/a&gt;
          &lt;a href="/contacts/" class="btn contact"&gt;contacts&lt;/a&gt;
          &lt;a href="/news/" class="btn news"&gt;news&lt;/a&gt;
          &lt;a href="/tests/" class="tests"&gt;Tests&lt;/a&gt;
          &lt;a href="/admin" class="admin"&gt;Admin&lt;/a&gt;
      &lt;/div&gt;
  &lt;div class="content"&gt;
      &lt;div class="carousel"&gt;
          &lt;input type="radio" id="banner1" class="checker" name="banner" checked&gt;
          &lt;input type="radio" id="banner2" class="checker" name="banner"&gt;
          &lt;input type="radio" id="banner3" class="checker" name="banner"&gt;
          &lt;input type="radio" id="banner4" class="checker" name="banner"&gt;
          &lt;div id="slide1" class="slide"&gt;
              &lt;img id="img1" src="#" alt=""&gt;
          &lt;/div&gt;
          &lt;div id="sl-title1" class="sl-title"&gt;title1&lt;/div&gt;
          &lt;div id="sl-description1" class="sl-description"&gt;text&lt;/div&gt;
          &lt;a id="sl-url1" class="sl-url" href="#" &gt;&lt;/a&gt;
          &lt;div id="slide2" class="slide"&gt;
              &lt;img id="img2" src="#" alt=""&gt;
          &lt;/div&gt;
          &lt;div id="sl-title2" class="sl-title"&gt;title2&lt;/div&gt;
          &lt;div id="sl-description2" class="sl-description"&gt;text&lt;/div&gt;
          &lt;a id="sl-url2" class="sl-url" href="" &gt;&lt;/a&gt;
          &lt;div id="slide3" class="slide"&gt;
              &lt;img id="img3" src="#" alt=""&gt;
          &lt;/div&gt;
          &lt;div id="sl-title3" class="sl-title"&gt;title3&lt;/div&gt;
          &lt;div id="sl-description3" class="sl-description"&gt;text&lt;/div&gt;
          &lt;a id="sl-url3" class="sl-url" href="#" &gt;&lt;/a&gt;
          &lt;div id="slide4" class="slide"&gt;
              &lt;img id="img4" src="#" alt=""&gt;
          &lt;/div&gt;
          &lt;div id="sl-title4" class="sl-title"&gt;title4&lt;/div&gt;
          &lt;div id="sl-description4" class="sl-description"&gt;text&lt;/div&gt;
          &lt;a id="sl-url4" class="sl-url" href="" &gt;&lt;/a&gt;
          &lt;div class="controls"&gt;
              &lt;label for="banner1"&gt;&lt;div class="progressbar"&gt;&lt;div class="progressbar-fill"&gt;&lt;/div&gt;&lt;/div&gt;&lt;span&gt;01&lt;/span&gt; kword1&lt;/label&gt;
              &lt;label for="banner2"&gt;&lt;div class="progressbar"&gt;&lt;div class="progressbar-fill"&gt;&lt;/div&gt;&lt;/div&gt;&lt;span&gt;02&lt;/span&gt; kword2&lt;/label&gt;
              &lt;label for="banner3"&gt;&lt;div class="progressbar"&gt;&lt;div class="progressbar-fill"&gt;&lt;/div&gt;&lt;/div&gt;&lt;span&gt;03&lt;/span&gt; kword3&lt;/label&gt;
              &lt;label for="banner4"&gt;&lt;div class="progressbar"&gt;&lt;div class="progressbar-fill"&gt;&lt;/div&gt;&lt;/div&gt;&lt;span&gt;04&lt;/span&gt; kword4&lt;/label&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="info-img"&gt;
          &lt;img src="#" alt="" /&gt;
          &lt;div class='imgelem'&gt;
          &lt;h3&gt;service&lt;/h3&gt;
          &lt;/div&gt;
          &lt;a href="/service/"&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="info-text"&gt;&lt;span&gt;text&lt;/span&gt;&lt;/div&gt;
  
      &lt;div class="partners"&gt;
          &lt;div class="in"&gt;
              &lt;div class="in-title"&gt;partners1&lt;/div&gt;
              &lt;img src="/static/main/img/partners/i1.png" alt=""&gt;
              &lt;img src="/static/main/img/partners/i2.png" alt=""&gt;
              &lt;img src="/static/main/img/partners/i3.png" alt=""&gt;
              &lt;img src="/static/main/img/partners/i4.jpg" alt=""&gt;
              &lt;img src="/static/main/img/partners/i5.jpg" alt=""&gt;
          &lt;/div&gt;
          &lt;div class="out"&gt;
              &lt;div class="out-title"&gt;partners2&lt;/div&gt;
              &lt;img src="/static/main/img/partners/i1.png" alt=""&gt;
              &lt;img src="/static/main/img/partners/i2.png" alt=""&gt;
              &lt;img src="/static/main/img/partners/i3.png" alt=""&gt;
              &lt;img src="/static/main/img/partners/i4.jpg" alt=""&gt;
              &lt;img src="/static/main/img/partners/i5.jpg" alt=""&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
      &lt;div class="footer"&gt;
          &lt;div class="copy"&gt;&lt;p&gt;Copyrights, 2017&lt;/p&gt;&lt;/div&gt;
          &lt;div class="social"&gt;&lt;p&gt;Icon&lt;/p&gt;&lt;/div&gt;
          &lt;div class="contacts"&gt;&lt;p&gt;Phone: xxx-xxx-xxx&lt;/p&gt;
              &lt;p&gt;Address: city, street&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;script src="/static/main/js/main.js"&gt;&lt;/script&gt;
  &lt;script src="/static/main/js/index.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Css file for template page:</p>
  
  <pre><code>@import url('https://fonts.googleapis.com/css?family=Play');
  
  * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
  }
  
  html {
      height: 100%;
  }
  
  /* =========================================== */
  /* ==================GRID SYSTEM============== */
  /* =========================================== */
  
  body {
      background-color: #666666;
      font-family: Play;
      min-height: 100%;
  
      display: grid;
      grid-template-rows: 300px 1fr 75px;
      grid-template-columns: 0.2fr repeat(3, 1fr) 0.2fr;
  }
  
  /* ----------------HEADER------------------ */
  .header {
      display: grid;
      grid-template-rows: repeat(3, 1fr);
      grid-template-columns: repeat(3, 1fr);
  
      grid-area: 1/1/2/6;
      justify-items: center;
      align-items: center;
  }
  
  /* ------------------particle-canvas----------- */
  .particle-canvas {
      justify-self: stretch;
      align-self: stretch;
      grid-area: 1/1/4/4;
      z-index: 1;
  }
  
  /* ----------------navbar-------------------- */
  .tests {
      grid-area: 1/3/2/4;
      z-index: 2;
      justify-self: end;
      align-self: start;
  }
  
  .admin {
      grid-area: 2/3/3/4;
      z-index: 2;
      justify-self: end;
      align-self: start;
  }
  
  .btn.home {
      grid-area: 2/1/3/4;
      z-index: 2;
  }
  
  .btn.service {
      grid-area: 3/1/4/2;
      z-index: 2;
  }
  
  .btn.contact {
      grid-area: 3/2/4/3;
      z-index: 2;
  }
  
  .btn.news {
      grid-area: 3/3/4/4;
      z-index: 2;
  }
  
  
  /* ----------------FOOTER------------------ */
  .footer {
      grid-area: 3/2/4/5;
  
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      align-items: center;
  
      border-top: solid;
      border-color: #23a2d4;
  }
  
  
  .footer .copy {
      grid-column: 1/2;
  }
  
  .footer .social {
      grid-column: 2/3;
      justify-self: center;
  }
  
  .footer .contacts {
      grid-column: 3/4;
      justify-self: end;
  }
  /* ============================================= */
  /* ================BUTTONS====================== */
  /* ============================================= */
  
  .btn {
      color: #23a2d4;
      cursor: pointer;
      font-size: 16px;
      font-weight: 200;
      line-height: 45px;
      text-decoration: none;
      text-transform: uppercase;
      vertical-align: middle;
      text-align: center;
      letter-spacing: 0;
      z-index: 2;
  }
  
  .btn,
  .btn:before,
  .btn:after {
      -webkit-transition: letter-spacing .7s linear,
                          border-color .7s linear,
                          width .7s linear;
      -moz-transition: letter-spacing .7s linear,
                       border-color .7s linear,
                       width .7s linear;
      -o-transition: letter-spacing .7s linear,
                     border-color .7s linear,
                     width .7s linear;
      transition: letter-spacing .7s linear,
                  border-color .7s linear,
                  width .7s linear;
  }
  
  .btn.home {
      font-size: 26px;
      font-weight: 400;
  }
  
  .btn:hover {
      letter-spacing: 5px;
  }
  
  .btn:before,
  .btn:after {
      content: "";
      border: 1px solid rgba(255, 255, 255, 0);
      display: block;
      width: 0;
      margin: auto;
  }
  
  .btn:hover:before,
  .btn:hover:after {
      border-color: #23a2d4;
      width: 100%;
  }
  </code></pre>
  
  <p>Css for index page:</p>
  
  <pre><code>.content {
      grid-area: 2/1/3/6;
  
      display: grid;
      grid-template-rows: 1fr 0.6fr 1fr;
      grid-template-columns: 0.2fr repeat(3, 1fr) 0.2fr;
      grid-row-gap: 10em;
  }
  
  /* ========================================= */
  /* ==============CAROUSEL=================== */
  /* ========================================= */
  
  
  /* --------------GRID SYSTEM---------------- */
  
  .carousel {
      grid-area: 1/1/2/6;
  
      display: grid;
      grid-template-rows: 0.5fr 1fr 0.3fr;
      grid-template-columns: 1fr;
  }
  
  .carousel .slide {
      grid-area: 1/1/4/2;
      z-index: 1;
  }
  
  .carousel .slide img {
      height: 100%;
      width: 100%;
  
      opacity: 0;
  }
  
  .carousel .sl-title {
      grid-area: 1/1/2/2;
      justify-self: center;
      align-self: end;
      z-index: 2;
  }
  
  .carousel .sl-description {
      grid-area: 2/1/3/2;
      justify-self: center;
      align-self: center;
      z-index: 2;
      text-align: center;
      max-width: 50%;
  
      opacity: 0;
  }
  
  .carousel .sl-url {
      grid-area: 1/1/4/2;
      display: none;
      z-index: 3;
  }
  
  .carousel .controls {
      grid-area: 3/1/4/2;
      z-index: 4;
  
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      justify-items: center;
      align-items: center;
  }
  
  .carousel .checker {
      display: none;
  }
  
  .carousel .sl-title {
      opacity: 0;
      background-color: rgba(255, 255, 255, 0.35);
      font-size: 3em;
      border-top: solid;
      border-bottom: solid;
      border-color: #23a2d4;
  }
  
  .carousel .sl-description {
      opacity: 0;
      background-color: rgba(255, 255, 255, 0.51);
      font-size: 1.5em;
      border-top: solid;
      border-bottom: solid;
      border-color: #23a2d4;
  }
  
  .carousel .controls label {
      padding-bottom: 1em;
      text-transform: uppercase;
      font-size: 1em;
      color: #b6f6f6;
      font-weight: 600;
      cursor: pointer;
  }
  
  .carousel .controls label span {
      font-size: 1.5em;
      font-weight: 800;
  }
  
  .carousel .controls .progressbar {
      height: 4px;
      width: 150px;
      background: #b6f6f6;
  }
  
  .progressbar-fill {
      height: 4px;
      width: 0;
      background: #23a2d4;
  }
  
  #banner1:checked ~ .controls label:nth-of-type(1) .progressbar-fill,
  #banner2:checked ~ .controls label:nth-of-type(2) .progressbar-fill,
  #banner3:checked ~ .controls label:nth-of-type(3) .progressbar-fill,
  #banner4:checked ~ .controls label:nth-of-type(4) .progressbar-fill {
      -webkit-animation: progressBarFill 5s linear;
  }
  
  #banner1:checked ~ .controls label:nth-of-type(1),
  #banner2:checked ~ .controls label:nth-of-type(2),
  #banner3:checked ~ .controls label:nth-of-type(3),
  #banner4:checked ~ .controls label:nth-of-type(4) {
      color: #23a2d4;
  }
  
  #banner1:hover ~ .controls label:nth-of-type(1),
  #banner2:hover ~ .controls label:nth-of-type(2),
  #banner3:hover ~ .controls label:nth-of-type(3),
  #banner4:hover ~ .controls label:nth-of-type(4) {
      color: #23a2d4;
      transition: all .3s;
  }
  
  #banner1:checked ~ #slide1 img,
  #banner2:checked ~ #slide2 img,
  #banner3:checked ~ #slide3 img,
  #banner4:checked ~ #slide4 img,
  #banner5:checked ~ #slide5 img{
      opacity: 1;
      transition: all .7s ease;
  }
  
  #banner1:checked ~ #sl-title1,
  #banner2:checked ~ #sl-title2,
  #banner3:checked ~ #sl-title3,
  #banner4:checked ~ #sl-title4,
  #banner5:checked ~ #sl-title5 {
      opacity: 1;
  }
  
  #banner1:checked ~ #sl-url1,
  #banner2:checked ~ #sl-url2,
  #banner3:checked ~ #sl-url3,
  #banner4:checked ~ #sl-url4,
  #banner5:checked ~ #sl-url5 {
      display: inline;
  }
  
  #banner1:checked ~ #sl-description1,
  #banner2:checked ~ #sl-description2,
  #banner3:checked ~ #sl-description3,
  #banner4:checked ~ #sl-description4,
  #banner5:checked ~ #sl-description5 {
      opacity: 1;
  }
  
  @-webkit-keyframes progressBarFill {
    from {
      width: 0;
    }
    to {
      width: 100%;
    }
  }
  
  
  /* ========================================= */
  /* ==============INFO-BLOCK================= */
  /* ========================================= */
  
  
  /* ---------------GRID SYSTEM--------------- */
  
  .info-img {
      grid-area: 2/2/3/3;
  }
  
  .info-text {
      grid-area: 2/3/3/5;
  }
  
  /*!* -------------------Image------------------ *!*/
  
  .info-img {
      background-color: #000;
      font-size: 17px;
      overflow: hidden;
      position: relative;
      text-align: center;
      width: 100%;
  }
  
  .info-img,
  .info-img .imgelem:before {
    /*-webkit-box-sizing: border-box;*/
    /*box-sizing: border-box;*/
      -webkit-transition: opacity .3s linear, right .3s linear;
      -moz-transition: opacity .3s linear, right .3s linear;
      -o-transition: opacity .3s linear, right .3s linear;
      transition: opacity .3s linear, right .3s linear;
  }
  
  .info-img img {
      backface-visibility: hidden;
      width: 100%;
      height: 100%;
      vertical-align: top;
  }
  
  .info-img .imgelem {
      bottom: 30px;
      left: 0;
      position: absolute;
      z-index: 0;
  }
  
  .info-img .imgelem:before {
      background-color: #23a2d4;
      bottom: -5px;
      content: '';
      left: 0;
      position: absolute;
      right: 100%;
      top: -5px;
      z-index: -1;
  }
  
  .info-img h3 {
      background-color: rgba(255, 255, 255, 0.76);
      color: #23a2d4;
      font-size: 1em;
      font-weight: 600;
      letter-spacing: 1px;
      margin: 0;
      padding: 5px 10px;
      text-transform: uppercase;
      z-index: 1;
  }
  
  .info-img a {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1;
  }
  
  .info-img:hover &gt; img {
      opacity: 0.1;
  }
  
  .info-img:hover .imgelem:before {
      right: -5px;
  }
  
  
  /*!* ---------------TEXT---------------- *!*/
  
  
  .info-text {
      border-top: solid;
      border-bottom: solid;
      border-color: #23a2d4;
      background-color: rgba(255, 255, 255, 0.76);
  
      margin-left: 20px;
      padding-top: 20%;
      font-size: 1.6em;
      text-align: center;
  }
  
  
  /*!* ========================================= *!*/
  /*!* ================PARTNERS================= *!*/
  /*!* ========================================= *!*/
  
  /*!* ----------------GRID--------------------- *!*/
  
  .partners {
      grid-area: 3/2/4/5;
  
      display: grid;
      grid-template-rows: 1fr 1fr;
      grid-template-columns: auto;
      grid-row-gap: 20px;
  }
  
  .partners .in {
      grid-area: 1/1/2/2;
  
      display: inline-grid;
      grid-template-rows: 0.5fr 1fr;
      grid-template-columns: repeat(5, 1fr);
      justify-items: center;
      align-items: center;
  }
  
  .partners .out {
      grid-area: 2/1/3/2;
  
      display: inline-grid;
      grid-template-rows: 0.5fr 1fr;
      grid-template-columns: repeat(5, 1fr);
      justify-items: center;
  }
  
  /*!* -------------------STYLE-------------------- *!*/
  
  .partners .in .in-title,
  .partners .out .out-title {
      grid-area: 1/1/2/6;
      align-self: center;
  
      font-size: 1.5em;
      border-bottom: solid;
      border-color: #23a2d4;
  }
  
  .partners .in img,
  .partners .out img {
      max-height: 100px;
      max-width: 100px;
  }
  </code></pre>
  
  <p>Js for main page (don't waste time on reading all this. I just used Julian Laval's particle animation):</p>
  
  <pre><code>!function(a){var b="object"==typeof self&amp;&amp;self.self===self&amp;&amp;self||"object"==typeof global&amp;&amp;global.global===global&amp;&amp;global;"function"==typeof define&amp;&amp;define.amd?define(["exports"],function(c){b.ParticleNetwork=a(b,c)}):"object"==typeof module&amp;&amp;module.exports?module.exports=a(b,{}):b.ParticleNetwork=a(b,{})}(function(a,b){var c=function(a){this.canvas=a.canvas,this.g=a.g,this.particleColor=a.options.particleColor,this.x=Math.random()*this.canvas.width,this.y=Math.random()*this.canvas.height,this.velocity={x:(Math.random()-.5)*a.options.velocity,y:(Math.random()-.5)*a.options.velocity}};return c.prototype.update=function(){(this.x&gt;this.canvas.width+20||this.x&lt;-20)&amp;&amp;(this.velocity.x=-this.velocity.x),(this.y&gt;this.canvas.height+20||this.y&lt;-20)&amp;&amp;(this.velocity.y=-this.velocity.y),this.x+=this.velocity.x,this.y+=this.velocity.y},c.prototype.h=function(){this.g.beginPath(),this.g.fillStyle=this.particleColor,this.g.globalAlpha=.7,this.g.arc(this.x,this.y,1.5,0,2*Math.PI),this.g.fill()},b=function(a,b){this.i=a,this.i.size={width:this.i.offsetWidth,height:this.i.offsetHeight},b=void 0!==b?b:{},this.options={particleColor:void 0!==b.particleColor?b.particleColor:"#fff",background:void 0!==b.background?b.background:"#1a252f",interactive:void 0!==b.interactive?b.interactive:!0,velocity:this.setVelocity(b.speed),density:this.j(b.density)},this.init()},b.prototype.init=function(){if(this.k=document.createElement("div"),this.i.appendChild(this.k),this.l(this.k,{position:"absolute",top:0,left:0,bottom:0,right:0,"z-index":1}),/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(this.options.background))this.l(this.k,{background:this.options.background});else{if(!/\.(gif|jpg|jpeg|tiff|png)$/i.test(this.options.background))return console.error("Please specify a valid background image or hexadecimal color"),!1;this.l(this.k,{background:'url("'+this.options.background+'") no-repeat center',"background-size":"cover"})}if(!/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(this.options.particleColor))return console.error("Please specify a valid particleColor hexadecimal color"),!1;this.canvas=document.createElement("canvas"),this.i.appendChild(this.canvas),this.g=this.canvas.getContext("2d"),this.canvas.width=this.i.size.width,this.canvas.height=this.i.size.height,this.l(this.i,{position:"relative"}),this.l(this.canvas,{"z-index":"20",position:"relative"}),window.addEventListener("resize",function(){return this.i.offsetWidth===this.i.size.width&amp;&amp;this.i.offsetHeight===this.i.size.height?!1:(this.canvas.width=this.i.size.width=this.i.offsetWidth,this.canvas.height=this.i.size.height=this.i.offsetHeight,clearTimeout(this.m),void(this.m=setTimeout(function(){this.o=[];for(var a=0;a&lt;this.canvas.width*this.canvas.height/this.options.density;a++)this.o.push(new c(this));this.options.interactive&amp;&amp;this.o.push(this.p),requestAnimationFrame(this.update.bind(this))}.bind(this),500)))}.bind(this)),this.o=[];for(var a=0;a&lt;this.canvas.width*this.canvas.height/this.options.density;a++)this.o.push(new c(this));this.options.interactive&amp;&amp;(this.p=new c(this),this.p.velocity={x:0,y:0},this.o.push(this.p),this.canvas.addEventListener("mousemove",function(a){this.p.x=a.clientX-this.canvas.offsetLeft,this.p.y=a.clientY-this.canvas.offsetTop}.bind(this)),this.canvas.addEventListener("mouseup",function(a){this.p.velocity={x:(Math.random()-.5)*this.options.velocity,y:(Math.random()-.5)*this.options.velocity},this.p=new c(this),this.p.velocity={x:0,y:0},this.o.push(this.p)}.bind(this))),requestAnimationFrame(this.update.bind(this))},b.prototype.update=function(){this.g.clearRect(0,0,this.canvas.width,this.canvas.height),this.g.globalAlpha=1;for(var a=0;a&lt;this.o.length;a++){this.o[a].update(),this.o[a].h();for(var b=this.o.length-1;b&gt;a;b--){var c=Math.sqrt(Math.pow(this.o[a].x-this.o[b].x,2)+Math.pow(this.o[a].y-this.o[b].y,2));c&gt;120||(this.g.beginPath(),this.g.strokeStyle=this.options.particleColor,this.g.globalAlpha=(120-c)/120,this.g.lineWidth=.7,this.g.moveTo(this.o[a].x,this.o[a].y),this.g.lineTo(this.o[b].x,this.o[b].y),this.g.stroke())}}0!==this.options.velocity&amp;&amp;requestAnimationFrame(this.update.bind(this))},b.prototype.setVelocity=function(a){return"fast"===a?1:"slow"===a?.33:"none"===a?0:.66},b.prototype.j=function(a){return"high"===a?5e3:"low"===a?2e4:isNaN(parseInt(a,10))?1e4:a},b.prototype.l=function(a,b){for(var c in b)a.style[c]=b[c]},b});
  
  var canvasDiv = document.getElementById('particle-canvas');
  var options = {
    particleColor: '#000000',
    background: '#636363',
    interactive: true,
    speed: 'medium',
    density: 'high'
  };
  var particleCanvas = new ParticleNetwork(canvasDiv, options);
  </code></pre>
  
  <p>And the last one - js for index page (just a little slides switcher):</p>
  
  <pre><code>function bannerSwitcher() {
    next = $('.checker').filter(":checked").next('.checker');
    if (next.length) next.prop('checked', true);
    else $('.checker').first().prop('checked', true);
  }
  
  var bannerTimer = setInterval(bannerSwitcher, 5000);
  
  $('.controls label').click(function() {
    clearInterval(bannerTimer);
    bannerTimer = setInterval(bannerSwitcher, 5000)
  });
  </code></pre>