Javascript to draw particles on cursor position sends the particles to the bottom

I'm trying to use a javascript I downloaded from https://github.com/tholman/90s-cursor-effects

It creates a bubble particles effects on the position of the cursor, but when I add some or elements inside my tag, all of the particles are pushed to the bottom of the web page.

Here is the sample code of the javascript, I'm really new to web development. When the tag is empty the cursor really displays the particles in it's actual position, but the moment I include a section the particles are pushed all the way down to the bottom, then when you scroll down to the bottom, the distance to the particle effect decreases but never stays in the actual cursor position.

(function bubblesCursor() {

  var width = window.innerWidth;
  var height = window.innerHeight;
  var cursor = {x: width/2, y: width/2};
  var particles = [];

  function init() {
    bindEvents();
    loop();
  }

  // Bind events that are needed
  function bindEvents() {
    document.addEventListener('mousemove', onMouseMove);
    window.addEventListener('resize', onWindowResize);
  }

  function onWindowResize(e) {
    width = window.innerWidth;
    height = window.innerHeight;
  }

  function onTouchMove(e) {
    if( e.touches.length > 0 ) {
      for( var i = 0; i < e.touches.length; i++ ) {
        addParticle(e.touches[i].clientX, e.touches[i].clientY);
      }
    }
  }

  function onMouseMove(e) {    
    cursor.x = e.clientX;
    cursor.y = e.clientY;

    addParticle( cursor.x, cursor.y);
  }

  function addParticle(x, y) {
    var particle = new Particle();
    particle.init(x, y);
    particles.push(particle);
  }

  function updateParticles() {

    // Update
    for( var i = 0; i < particles.length; i++ ) {
      particles[i].update();
    }

    // Remove dead particles
    for( var i = particles.length - 1; i >= 0; i-- ) {
      if( particles[i].lifeSpan < 0 ) {
        particles[i].die();
        particles.splice(i, 1);
      }
    }

  }

  function loop() {
    requestAnimationFrame(loop);
    updateParticles();
  }

  /**
   * Particles
   */

  function Particle() {

    this.lifeSpan = 250; //ms
    this.initialStyles ={
      "position": "absolute",
      "display": "block",
      "pointerEvents": "none",
      "z-index": "10000000",
      "width": "5px",
      "height": "5px",
      "will-change": "transform",
      "background": "#e6f1f7",
      "box-shadow": "-1px 0px #6badd3, 0px -1px #6badd3, 1px 0px #3a92c5, 0px 1px #3a92c5",
       "border-radius": "3px",
      "overflow": "hidden"
    };

    // Init, and set properties
    this.init = function(x, y) {

      this.velocity = {
        x:  (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 10),
        y: (-.4 + (Math.random() * -1))
      };

      this.position = {x: x - 10, y: y - 10};

      this.element = document.createElement('span');
      applyProperties(this.element, this.initialStyles);
      this.update();

      document.body.appendChild(this.element);
    };

    this.update = function() {
      this.position.x += this.velocity.x;
      this.position.y += this.velocity.y;

      // Update velocities
      this.velocity.x += (Math.random() < 0.5 ? -1 : 1) * 2 / 75;
      this.velocity.y -= Math.random() / 600;
      this.lifeSpan--;

      this.element.style.transform = "translate3d(" + this.position.x + "px," + this.position.y + "px,0) scale(" + ( 0.2 + (250 - this.lifeSpan) / 250) + ")";
    }

    this.die = function() {
      this.element.parentNode.removeChild(this.element);
    }
  }

  /**
   * Utils
   */

  // Applies css `properties` to an element.
  function applyProperties( target, properties ) {
    for( var key in properties ) {
      target.style[ key ] = properties[ key ];
    }
  }

  init();
})();