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

Question

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.

Here's my code.

 (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(); })(); 

Answer 1

Problem is not with the script but with the way you layout your HTML elements. Make sure your topmost container position set to absolute :

<div class="parent" style="position: absolute;">
    <h1>title</h1>
    ...
    other content
    ...
</div>