About

Moonrise Animation: A Tranquil Night Sky | HTML CSS JS Poject

IT in Hindi March 16, 2025

Experience a peaceful night as the moon rises over a starry sky. This simple animation simulates a realistic moonrise using HTML, CSS, and JavaScript. 


Creating animations with HTML, CSS, and JavaScript allows for visually stunning effects on web pages. One of the most serene animations to create is a realistic moonrise, bringing a calming night sky to life.

Introduction

This blog post walks you through a simple yet elegant moonrise animation using basic web technologies. By combining CSS animations and JavaScript-generated stars, we can simulate the beauty of the moon rising against a starry night sky.

Key Features of the Animation

  • Realistic Moon Image: A high-quality image of the moon with lighting effects.

  • Twinkling Stars: Dynamically generated stars with smooth animations.

  • Smooth Moonrise Effect: The moon gradually rises in a natural motion.

How It Works

1. Setting Up the Page (HTML)

  • The webpage has a sky background, a moon, stars, and a horizon (dark ground at the bottom).
  • A text title appears after a few seconds to enhance the visual effect.

2. Designing the Night Sky (CSS)

  • The background is a dark blue gradient, making it look like a night sky.
  • The moon starts below the screen and slowly rises to the top.
  • Stars are created as small white dots with a blinking (twinkling) effect.
  • A horizon effect at the bottom creates depth, making it look like the moon is rising over a landscape.

3. Creating the Stars (JavaScript)

  • JavaScript generates 400 small stars at random positions.
  • Each star is given a random size and twinkling animation to make the night sky more dynamic.

Main Features

✅ Smooth Moonrise – The moon slowly rises over 16 seconds for a realistic effect.
✅ Glowing Effect – The moon has a bright glow to make it look more realistic.
✅ Twinkling Stars – The stars randomly blink to simulate a natural night sky.
✅ Soft Fade-In Text – The title appears smoothly after the moon has risen.

Conclusion

This project is a simple yet effective way to practice CSS animations and JavaScript-generated elements. You can customize it by changing the colors, moon image, or adding shooting stars.

Step-by-Step Explanation of the Moonrise Animation Code

This code creates a realistic moonrise animation with twinkling stars, a glowing moon, and a smooth transition effect. Let's break it down step by step.


1. HTML Structure

HTML defines the layout of the page.


    

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Realistic Moon Rising Animation</title>

Declares the document type as HTML5. Sets the language to English. Defines a responsive design using the meta viewport tag. The title of the page is set as "Realistic Moon Rising Animation".

2. CSS Styling CSS is used to design the sky, moon, stars, and animations. 

a) Page Background and Sky 


    

       body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background: black;
    font-family: 'Arial', sans-serif;
}
.sky {
    position: relative;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at bottom, #0a0f2b, #040d25, #010a16);
    overflow: hidden;
}
Removes default margins and paddings (margin: 0; padding: 0). The background is set to black for a night sky effect. .sky uses a radial gradient from dark blue to black to mimic a real night sky. 

 b) The Moon 

    
      .moon {
    position: absolute;
    bottom: -250px; /* Starts below the screen */
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
    background: url('https://upload.wikimedia.org/wikipedia/commons/9/9d/Full_moon.jpeg');
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    box-shadow: 0 0 120px rgba(255, 255, 255, 1), 0 0 60px rgba(255, 255, 255, 0.8);
    filter: brightness(1.1) contrast(1.3);
    animation: rise 16s ease-in-out forwards;
}
The moon starts below the screen (bottom: -250px). The background uses an actual moon image. The box-shadow creates a glowing effect around the moon. The animation: rise 16s ease-in-out forwards; makes the moon slowly rise. 

c) Stars & Twinkling Effect 

    
    .stars {
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
}

.star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    opacity: 0.9;
    animation: twinkle 5s infinite ease-in-out;
}
Stars are small white circles randomly placed across the screen. Each star has an animation called twinkle that makes them blink. 

d) Horizon (Ground Effect) 

    
.horizon {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 35%;
    background: linear-gradient(to top, black, transparent);
}
This is a dark gradient at the bottom to make the animation look more realistic. It creates the illusion of the moon rising over a landscape. 

e) Text that Fades In 

    
.text {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 3rem;
    font-weight: bold;
    color: #dcdcdc;
    background: rgba(0, 0, 0, 0.6);
    padding: 20px 40px;
    border-radius: 20px;
    text-align: center;
    opacity: 0;
    animation: fadeIn 7s ease-in-out 8s forwards;
}
The title text ("Moonrise: A Tranquil Night Sky") appears after the moon has risen. It uses animation: fadeIn 7s ease-in-out 8s forwards; to fade in after 8 seconds. 

3. CSS Animations 

a) Moon Rising Animation 

    
@keyframes rise {
    0% {
        bottom: -250px;
        opacity: 0;
    }
    100% {
        bottom: 70%;
        opacity: 1;
    }
}
Moves the moon from below the screen (−250px) to 70% height. The opacity gradually increases to make the moon appear naturally. 

b) Star Twinkling Animation 

    
@keyframes twinkle {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 0.2; }
}
Stars fade in and out to look like they are twinkling. 

c) Text Fade-in Animation 

    
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
The text starts invisible and gradually fades in. 

4. JavaScript: Creating Stars Dynamically 

    
const starsContainer = document.querySelector('.stars');
const starCount = 400;

for (let i = 0; i < starCount; i++) {
    const star = document.createElement('div');
    star.classList.add('star');
    const size = Math.random() * 3 + 1;
    star.style.width = `${size}px`;
    star.style.height = `${size}px`;
    star.style.top = `${Math.random() * 100}%`;
    star.style.left = `${Math.random() * 100}%`;
    star.style.animationDelay = `${Math.random() * 5}s`;
    starsContainer.appendChild(star);
}
Selects the .stars container. Loops 400 times to create 400 stars dynamically. Randomizes: size (1px to 4px) for different star sizes. position (random top and left values) to scatter stars across the sky. animation delay (random 0s to 5s) so all stars don’t twinkle at the same time.
Tags:

Post a Comment

0 Comments