Starfield Animation using Vanilla Javascript

Starfield Animation using Vanilla Javascript

Background animations are visually appealing elements used in the background to enhance the aesthetics and user experience of a webpage. Background animations serve many purposes, some of which include increasing visual appeal, reinforcing a brand's identity, conveying a narrative, and helping to keep users engaged. Today we have created a starfeild animation with HTML CSS and vanilla JavaScript. It can be used in the background of the homepage of a website. The video tutorial below shows how to create this snippet. Watch the video tutorial before collecting the source code. We Hope you will not have any difficulty in understanding the code. Subscribe to our channel if you like our video tutorials.

Video Tutorial:

We hope you watched the video tutorial. Now the question may be what does starfield animation mean? A starfield animation is a computer graphics or animation created to simulate the appearance of stars in space. In this background animation, some small particles will move slowly from left to right or from right to left. In our snippet, the particles are going from left to right. Just like the stars in space move from one place to another due to the force of gravity.

In the HTML part, we have created a container div 'wrapper' with a canvas element inside it. We have set the global selector's margin and padding to zero in the CSS so that the animation spans the entire viewport. After that, the 'wrapper' and canvas elements are styled. Then Canvas is first initialized using vanilla JavaScript. After that, star initialization, star drawing, animation loop, and canvas resize are handled using vanilla javascript. Basically, vanilla JavaScript creates a horizontal star-moving loop animation that will move from one side of the computer screen to the other.

You May Also Like:

Starfield Animation using Vanilla Javascript [ Source Code ]:

Create HTML, CSS, and JS files to create Starfield animation snippets. Copy and paste the codes from the code box below into your file. If the animation doesn't work properly, you can download the code from the download button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
    <!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Starfield Animation Vanilla Javascript</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <canvas id="effect"></canvas> 
    </div>


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

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

// Array to store star positions
const stars = [];

// Function to initialize stars
function initStars() {
  for (let i = 0; i < 100; i++) {
    stars.push({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      radius: Math.random() * 2,
      speed: Math.random() * 0.5 + 0.1 // Adjust the speed as needed
    });
  }
}

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

  for (const star of stars) {
    ctx.beginPath();
    ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
    ctx.fillStyle = 'white'; // Star color
    ctx.fill();
    ctx.closePath();

    // Update star position for animation
    star.x += star.speed;

    // Reset star position when it goes beyond the canvas
    if (star.x > canvas.width) {
      star.x = 0;
    }
  }

  requestAnimationFrame(drawStars);
}

// Initialize stars and start the animation
initStars();
drawStars();

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

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

ADD CSS:

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

We Hope the background animation is working properly on your device. There are many more such snippets on our website. Click on the Load More button at the bottom of our website homepage to get them. Thank you very much for visiting our website.

DOWNLOAD CODE

Post a Comment

Please Do not Enter any spam link in the comment box