Creating a visually appealing background can enhance the overall user experience of a website. In this tutorial, we’ll explore how to create a dynamic starry night background using HTML, CSS, and JavaScript. This effect will feature twinkling stars that are randomly positioned and animated to create a mesmerizing night sky. 🌌✨
What You’ll Learn
✅ How to structure the starry night background with HTML & CSS 🌙
✅ Applying CSS animations to create a twinkling effect 🌟
✅ Using JavaScript to dynamically generate multiple stars ✨
✅ Randomizing star sizes, positions, and animation speeds for realism 🔮
✅ Enhancing the background to make it interactive and engaging 🎯
By the end of this tutorial, you’ll be able to create a beautiful, animated night sky that can be used in landing pages, hero sections, or as a full-page background. 🎥🚀
Step 1: Setting Up the HTML Structure
To start, let’s create a simple HTML file with a basic structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Starry Night Background</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<script src="script.js"></script>
</body>
</html>Step 2: Styling the Stars with CSS
Now, let’s add CSS to create the night sky and twinkling effect.
body {
margin: 0;
overflow: hidden;
height: 100vh;
background: black;
position: relative;
}
.star {
position: absolute;
background: white;
border-radius: 50%;
opacity: 0.8;
animation: twinkle 2s infinite ease-in-out;
}
@keyframes twinkle {
0%, 100% { opacity: 0.8; }
50% { opacity: 0.3; }
}The .star class styles each star as a small white circle. The @keyframes twinkle animation changes the opacity over time, creating a twinkling effect. 🌟
Step 3: Generating Stars Dynamically with JavaScript
Instead of manually placing stars, we use JavaScript to randomly generate them.
// Function to create multiple stars
function createStars() {
const numberOfStars = 100; // Adjust for more or fewer stars
for (let i = 0; i < numberOfStars; i++) {
const star = document.createElement('div');
star.classList.add('star');
// Random size, position, and animation duration for each star
const size = Math.random() * 3 + 1;
star.style.width = `${size}px`;
star.style.height = `${size}px`;
star.style.left = `${Math.random() * 100}vw`;
star.style.top = `${Math.random() * 100}vh`;
star.style.animationDuration = `${Math.random() * 2 + 1}s`;
document.body.appendChild(star);
}
}
createStars();This script creates 100 stars, giving each one a random size, position, and animation duration to make the effect more natural. ✨
Final Output 🎉
Once you add all the above code to your project, refresh your browser, and you’ll see a beautiful starry night background with twinkling stars! This effect can be customized further by:
- Changing the number of stars
- Modifying animation speeds and effects
- Adding shooting stars or constellation patterns
Live Demo & Source Code 🚀
Watch the complete tutorial video here:
Get the source code on GitHub:
📂 GitHub Repository
If you enjoyed this tutorial, like, comment, and subscribe to Madras Academy for more awesome web development tutorials! 🚀ðŸŒ
#HTML #CSS #JavaScript #WebDesign #BackgroundDesign #WebDevelopment #FrontendDevelopment #TechTutorial #InteractiveDesign #WebDesignInspiration 🎉