Particles Animation vanilla Javascript

The animated background or background animations used on any website are basically moving visual elements as a backdrop for a website's content. Some of these background animations are parallax effects, fluid animation, particle animation, etc. These animated backgrounds are made using various web technologies like HTML, CSS, JavaScript, HTML5 Canvas, etc. Increasing visual appeal, drawing the attention of visitors, and standing out from static websites are some of the reasons for which background animation is used on websites. Today we created a particle background animation using HTML, CSS, and vanilla JavaScript. The video below shows the process of creating this snippet from start to finish.

Video Tutorial:

We Hope you have watched the above video tutorial on particle background animation using vanilla javascript. Background animation plays an important role in making corporate, portfolio, e-commerce, etc. sites look modern and dynamic. Among background animation techniques, particle animation is particularly noteworthy because these animations are lightweight and can be optimized to run smoothly. Small, discrete elements such as dots, lines, shapes, stars, snowflakes, etc. move randomly following specific paths in particles animated backgrounds. This snippet uses vanilla JavaScript. Vanilla JavaScript is native JavaScript that does not rely on additional libraries or frameworks such as jQuery, React, or Angular. Vanilla JavaScript codes are lightweight and have no unnecessary dependencies. Many popular and famous websites like Apple, Stripe, Airbnb, Spotify, Awwwards, Squarespace, Porsche, Tesla, Nike, Mercedes-Benz, Toyota, Samsung, Burberry, Microsoft, etc. use background animation for aesthetic reasons.

You May Aldo like:

Particles background animation using Vanilla Javascript [ Source Code ]:

To create this Particle background animation using Vanilla Javascript, first, we need to create the necessary files like HTML, CSS, and JS. The entire process is shown in the above video tutorial. After that, copy the source code below and paste it into your HTML and CSS files. If you want the direct code for this project, you can download the source code by clicking the download button below this blog post.

ADD HTML:

<!DOCTYPE html>
<!--
    Website: divinectorweb.com
    Subscribe Us: https://www.youtube.com/c/Divinector 
    Support Us: https://www.buymeacoffee.com/divinector
-->
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>particles Animation Vanilla Javascript</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <canvas id="effects"></canvas> 
    </div>


    <script>
        const canvas = document.getElementById('effects'); 
const ctx = canvas.getContext('2d');

// Set canvas size to match the window size
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// Array to store particle positions
const particles = [];

// Function to initialize particles
function initParticles() {
  for (let i = 0; i < 200; i++) {
    particles.push({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      size: Math.random() * 5 + 2, 
      speedX: Math.random() * 4 - 2,
      speedY: Math.random() * 4 - 2,
      color: `hsl(${Math.random() * 360}, 50%, 50%)` 
    });
  }
}

// Function to draw particles
function drawParticles() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  for (const particle of particles) {
    ctx.beginPath();
    ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
    ctx.fillStyle = particle.color;
    ctx.fill();

    // Update particle position for animation
    particle.x += particle.speedX;
    particle.y += particle.speedY;

    // Bounce particles off the walls
    if (particle.x < 0 || particle.x > canvas.width) {
      particle.speedX *= -1;
    }

    if (particle.y < 0 || particle.y > canvas.height) {
      particle.speedY *= -1;
    }
  }

  requestAnimationFrame(drawParticles);
}

// Initialize particles and start the animation
initParticles();
drawParticles();

// Resize canvas when the window is resized
window.addEventListener('resize', () => {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  initParticles();
});

    </script>
</body>
</html>

ADD CSS:

* {
	margin: 0;
	padding: 0;
}
.wrapper {
	overflow: hidden;
	background-color: #111;
}
canvas {
	display: block;
}

Simple or complex, background animations are essential to modern web design because they improve a website's user experience and aesthetic appeal. Particle animations and other animated backgrounds may captivate viewers and enhance the recall value of the material by creating a dynamic and captivating atmosphere. We hope you have collected the source code. Click the Load More button on our homepage to get more such snippets. Thank you for visiting our website.

DOWNLOAD CODE

Video Tutorial:

Particles background animation using Vanilla Javascript [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Particles Animation vanilla Javascript

Video Tutorial:

Particles background animation using Vanilla Javascript [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form