Mouse Move Animation | Javascript Tutorials

Mouse Move Animation using Javascript

The Animation is a very important part of any website until 2020, as it enhances the user experience and makes it visually appealing. Therefore, consider this importance

I wanted to animated waves for the background of a page. Initially, I tried a staggered loop animation in Javascript, but some mobile devices struggled

Watch Demo And Try Coding Yourself with your own customizations

Html File Source code

1. ➤ Add-in <body></body> Tag element :-

// Created by Coding Hindi

window.addEventListener("DOMContentLoaded", () => {
  const canvas = document.querySelector("#canvas");
  const ctx = canvas.getContext("2d");

const cw = (canvas.width = innerWidth);
  const ch = (canvas.height = innerHeight);

ctx.fillStyle = "#111";
  ctx.fillRect(0, 0, cw, ch);

let particles = [];
  let hslColor = 0;
  const mouse = {
    x: undefined,
    y: undefined,
  };

class Particle {
    constructor(x, y, r, vel, color) {
      this.x = x;
      this.y = y;
      this.r = r;
      this.vel = vel;
      this.color = color;
    }

draw() {
      ctx.fillStyle = this.color;
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
      ctx.fill();
      ctx.closePath();
    }

update() {
      this.draw();

this.x += this.vel.x;
      this.y += this.vel.y;

this.r -= 0.07;
    }
  }

particles.push(new Particle(x, y, r, vel, color));
    }
  }

function animate() {
  //requestAnimationFrame(animate)
    setTimeout(animate, 1);
    ctx.fillStyle = "#111"
    ctx.fillRect(0, 0, cw, ch);

/*
    if (move) {
      createParticles();
    } else {
      mouse.x = undefined;
      mouse.y = undefined;
    }
    */

particles.forEach((particle, index) => {
      particle.update();
      if (particle.r < 0.02) {
        particles.splice(index, 1);
      }
    });
  }

function positionHandler(e) {
    if (e.clientX && e.clientY) {
      mouse.x = e.clientX;
      mouse.y = e.clientY;
    } else if (e.targetTouches) {
      mouse.x = e.targetTouches[0].clientX;
      mouse.y = e.targetTouches[0].clientY;
      e.preventDefault();
    }

createParticles();
  }
  canvas.addEventListener("mousemove", positionHandler, false);
  canvas.addEventListener("touchstart", positionHandler, false);
  canvas.addEventListener("touchmove", positionHandler, false);

animate();
});

>> CSS Text Animation

>> Login SignUp Forms

>> Loading Animations

>> Fun Javascript Tutorials

If you like this content

please comment down below

Share This Post

If you have any questions related to coding problems ask us

any suggestions tell us

Thanks for reading this article #CodingHindi

Coding Hindi

Mouse Move Animation | Javascript Tutorials

Mouse Move Animation using Javascript

Watch Demo And Try Coding Yourself with your own customizations

Html File Source code

Post a Comment

Why should we use strict in JavaScript

78 Interview Questions for Web Development

Floating Text Loader Using HTML CSS | Html LOader | Loading Screen Animation

Cool Waves Animation Using HTML CSS with Source Code

10 Best Color Palette Generators Online (Free)