Building an Interactive Starry Sky with HTML, CSS, and JavaScript

Ever wanted to code your own interactive starry sky? ✨ This tutorial teaches you how to build it using HTML, CSS, and JavaScript.

What you'll learn:

Basics of HTML structure and element creation.
CSS positioning and animation properties.
JavaScript DOM manipulation and event handling.

What you can build:

Enhance your web development portfolio.
Add interactivity to your website.
Gain practical coding experience.

Ready to get started? Let's code a celestial masterpiece!

1. Set Up the HTML Structure:

Create an HTML file and add the following basic structure:

HTML

                        
<!DOCTYPE html>

<html>

<head>

  <title>Interactive Starry Sky</title>

  <link rel="stylesheet" href="styles.css">

</head>

<body>

  <div id="star-container"></div>

  <script src="script.js"></script>

</body>

</html>

2. Style the Stars with CSS:

Create a styles.css file and add the following styles:

CSS

                        
body {

  background-color: black;

  overflow: hidden; /* Prevent scrolling */

}



#star-container {

  position: relative;

  width: 100%;

  height: 100vh;

}



#star-container .star {

  position: absolute;

  width: 2px;

  height: 2px;

  background-color: white;

  border-radius: 50%; /* Make stars circular */

  animation: twinkle 1s infinite ease-in-out;

}



@keyframes twinkle {

  0%, 100% { opacity: 0.5; }

  50% { opacity: 1; }

}

3. Generate Stars with JavaScript:

Create a script.js file and add the following code:

JavaScript

                        
const starContainer = document.getElementById("star-container");



function createStars() {

  const numStars = 250;

  for (let i = 0; i < numStars; i++) {

    const star = document.createElement("div");

    star.classList.add("star");



    // Position stars randomly within the container

    const randomX = Math.random() * starContainer.offsetWidth;

    const randomY = Math.random() * starContainer.offsetHeight;

    star.style.left = randomX + "px";

    star.style.top = randomY + "px";



    starContainer.appendChild(star);

  }

}

createStars();

4. Add Interactivity (Optional):

Enhance the experience with mouse interactions:

JavaScript

                        
starContainer.addEventListener("mousemove", (event) => {

  const mouseX = event.clientX;

  const mouseY = event.clientY;



  // Move stars near the mouse

  const stars = document.querySelectorAll("#star-container .star");

  stars.forEach((star) => {

    const starX = parseInt(star.style.left);

    const starY = parseInt(star.style.top);



    // Calculate distance between star and mouse

    const distanceX = starX - mouseX;

    const distanceY = starY - mouseY;

    const distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY);



    // Move only stars within a certain radius

    const moveRadius = 150; // Adjust this value to control the affected area

    if (distance <= moveRadius) {

      const speed = 0.05; // Adjust speed as desired

      star.style.left = (starX + distanceX * speed) + "px";

      star.style.top = (starY + distanceY * speed) + "px";

    }

  });

});

5. View Your Creation:

Open the HTML file in a browser and you will see a screen similar to the one below. When you move your mouse the stars near your cursor will slowly move away. Click around enjoy your interactive starry sky!

That's it. Congratulations!! You have succesfully created an interactive starry sky using html, css and javascript.