Create Merry Christmas 2024 Animation with HTML, CSS, and JavaScript

Faraz

By Faraz -

Learn how to create a beautiful Merry Christmas 2024 animation using HTML, CSS, and JavaScript. Step-by-step guide for beginners.

Join us on Telegram
create-merry-christmas-2024-animation-with-html-css-and-javascript.webp
Read Alsocreate-a-stunning-hexagon-loader-with-html-and-css.webpCreate a Hexagon Loader with HTML and CSS

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Conclusion
  6. Preview

Creating a Christmas-themed webpage is a fun way to celebrate the festive season and showcase your web development skills. In this guide, we’ll teach you how to make a beautiful Merry Christmas 2024 animation using HTML, CSS, and JavaScript. You will add snowflakes, a Christmas tree, and animations for a magical effect.

Prerequisites

Before starting, ensure you have the following:

  1. Basic HTML, CSS, and JavaScript knowledge.
  2. A code editor like Visual Studio Code.
  3. A modern browser for previewing your work.

Source Code

Step 1 (HTML Code):

The first thing we need to do is create our HTML File for christmas animation. We'll start with well-organized markup. After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.

Here's a detailed explanation of each part:

1. Document Declaration

<!DOCTYPE html>
  • Declares the document as HTML5, ensuring compatibility with modern web browsers.

2. HTML Tag and Language Attribute

<html lang="en">
  • Starts the HTML document with the language set to English (lang="en").

3. Head Section

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Merry Christmas 2024</title>
    <link rel="stylesheet" href="styles.css">
</head>
  • <meta charset="UTF-8">: Ensures text encoding compatibility, supporting various characters.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Makes the page responsive for all devices.
  • <title>Merry Christmas 2024</title>: Sets the title of the webpage as "Merry Christmas 2024".
  • <link rel="stylesheet" href="styles.css">: Links an external CSS file named styles.css for styling.

4. Body Section

<body>
    <div class="container">
        <div class="shooting-star"></div>
        <h1 class="wish">Merry Christmas 2024</h1>
        <img class="tree" src="https://raw.githubusercontent.com/farazc60/Project-Images/refs/heads/main/christmas/christmasTree.webp" alt="">
        <img class="snow-hill" src="https://raw.githubusercontent.com/farazc60/Project-Images/refs/heads/main/christmas/snowyHills.webp" alt="">
    </div>
    <canvas id="snow"></canvas>
    <script src="script.js"></script>
</body>

Elements:

1. Container (<div class="container">)

  • Groups the main visual elements like the shooting star, text, and images.
  • Styled with CSS for layout and alignment.

2. Shooting Star (<div class="shooting-star"></div>)

  • An empty div with a class for creating a shooting star effect, styled using CSS animations.

3. Text Heading (<h1 class="wish">Merry Christmas 2024</h1>)

  • Displays the greeting text "Merry Christmas 2024" prominently.

4. Christmas Tree Image (<img class="tree" src="...">)

  • Displays a Christmas tree image from a GitHub-hosted URL.

5. Snow Hill Image (<img class="snow-hill" src="...">)

  • Displays a snow-covered hill image from another GitHub-hosted URL.

6. Snowfall Effect (<canvas id="snow"></canvas>)

  • A <canvas> element used to draw graphics. It will display falling snow, rendered via JavaScript.

7. Script (<script src="script.js"></script>)

  • Links an external JavaScript file named script.js that adds interactivity or animations (e.g., snowfall).
Read Alsocreate simple responsive blog cards with bootstrap 4.jpgHow to Create Simple Responsive Blog Cards with Bootstrap 4

Step 2 (CSS Code):

Next, we need to style our christmas animation by adding our CSS. This will give our animation an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

Here's a detailed explanation:

1. General Styling for the Body

body {
  margin: 0;
  background: linear-gradient(to bottom, #001d3d, #003566);
  font-family: Arial, sans-serif;
  height: 100vh;
}
  • margin: 0;: Removes default margins around the body.
  • background: linear-gradient(to bottom, #001d3d, #003566);: Creates a gradient background from dark blue at the top to a lighter blue at the bottom.
  • font-family: Arial, sans-serif;: Sets the font for text to Arial or the default sans-serif.
  • height: 100vh;: Makes the body take up the full height of the viewport.

2. Container Styling

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
  • display: flex;: Activates Flexbox for layout.
  • justify-content: center;: Centers items horizontally.
  • align-items: center;: Centers items vertically.
  • flex-direction: column;: Stacks child elements vertically.

3. Shooting Star

.shooting-star {
  position: absolute;
  top: 0;
  left: -120px;
  width: 120px;
  height: 2px;
  background: url(...) center center no-repeat;
  background-size: 100% 100%;
  transform: rotate(20deg);
  animation: 10s falling-star 0.2s infinite;
}
  • position: absolute;: Positions the shooting star relative to the closest positioned ancestor.
  • top: 0; left: -120px;: Starts the star slightly off-screen.
  • background: url(...): Adds a shooting star image as the background.
  • animation: 10s falling-star 0.2s infinite;: Applies the falling-star animation repeatedly, with a 10-second duration and a 0.2-second delay.

4. Falling Star Animation

@keyframes falling-star {
  0% {
    transform: translate3d(0, 0, 0) rotate(10deg);
    opacity: 1;
  }
  25%, 100% {
    transform: translate3d(100vw, 30vh, 0) rotate(10deg);
    opacity: 0;
  }
}
  • 0%: The star starts fully visible at its initial position.
  • 25%, 100%: Moves the star across the screen (translate3d) while fading out (opacity: 0).

5. Christmas Tree

.tree {
  position: absolute;
  bottom: 10px;
  width: 50%;
  max-width: 400px;
  height: auto;
  z-index: 1;
}
  • position: absolute;: Fixes the tree to the bottom of the screen.
  • width: 50%; max-width: 400px;: Sets the tree to half the screen width, but not larger than 400px.
  • z-index: 1;: Places the tree below higher-priority elements.

6. Snow Hill

.snow-hill {
  position: absolute;
  width: 100%;
  bottom: 0;
}
  • position: absolute;: Fixes the snow hill to the bottom.
  • width: 100%;: Ensures the hill spans the full screen width.

7. Text Styling and Animation

.wish {
  margin: 0;
  text-align: center;
  font-size: 3rem;
  font-family: Cursive, Arial, sans-serif;
  color: #fff;
  text-shadow: 0 0 5px #ff0000, 0 0 10px #ff3333, 0 0 20px #ff6666;
  animation: sparkle 2s infinite;
  z-index: 4;
}
  • font-size: 3rem;: Makes the greeting text large.
  • color: #fff;: Sets the text color to white.
  • text-shadow: ...: Creates a glowing effect with red hues.
  • animation: sparkle 2s infinite;: Adds the sparkle animation.

Sparkle Animation

@keyframes sparkle {
  0%, 100% {
    text-shadow: 0 0 5px #ff0000, 0 0 10px #ff3333, 0 0 20px #ff6666;
    transform: scale(1);
  }
  50% {
    text-shadow: 0 0 10px #ffcc00, 0 0 20px #ff9900, 0 0 30px #ff6600;
    transform: scale(1.1);
  }
}
  • 0%, 100%: The text glows red and stays at normal size.
  • 50%: Temporarily glows yellow and enlarges slightly (scale(1.1)).

8. Canvas

canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}
  • position: absolute;: Covers the entire screen.
  • pointer-events: none;: Makes the canvas non-interactive, ensuring it doesn't block clicks.
body {
  margin: 0;
  background: linear-gradient(to bottom, #001d3d, #003566);
  font-family: Arial, sans-serif;
  height: 100vh;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.shooting-star {
  position: absolute;
  top: 0;
  left: -120px;
  width: 120px;
  height: 2px;
  background: url(https://raw.githubusercontent.com/farazc60/Project-Images/refs/heads/main/christmas/shooting-star.png) center center no-repeat;
  background-size: 100% 100%;
  transform: rotate(20deg);
  animation: 10s falling-star 0.2s infinite;
}

@keyframes falling-star {
  0% {
    transform: translate3d(0, 0, 0) rotate(10deg);
    opacity: 1;
  }
  25%, 100% {
    transform: translate3d(100vw, 30vh, 0) rotate(10deg);
    opacity: 0;
  }
}

.tree{
  position: absolute;
  bottom: 10px;
  width: 50%;
  max-width: 400px;
  height: auto;
  z-index: 1;
}

@keyframes fall {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: translate(calc(-50% + 300px), calc(-50% + 500px)) rotate(180deg);
    opacity: 0.5;
  }
  100% {
    transform: translate(calc(-50% + 500px), calc(-50% + 700px)) rotate(360deg);
    opacity: 0;
  }
}

.snow-hill{
  position: absolute;
  width: 100%;
  bottom: 0;
}

.wish {
  margin: 0;
  text-align: center;
  font-size: 3rem;
  font-family: Cursive , Arial, sans-serif;
  color: #fff;
  text-shadow: 0 0 5px #ff0000, 0 0 10px #ff3333, 0 0 20px #ff6666;
  animation: sparkle 2s infinite;
  z-index: 4;
}

@keyframes sparkle {
  0%, 100% {
    text-shadow: 0 0 5px #ff0000, 0 0 10px #ff3333, 0 0 20px #ff6666;
    transform: scale(1);
  }
  50% {
    text-shadow: 0 0 10px #ffcc00, 0 0 20px #ff9900, 0 0 30px #ff6600;
    transform: scale(1.1);
  }
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

Step 3 (JavaScript Code):

Finally, we need to create a function in JavaScript. The JavaScript code creates a snow animation on an HTML canvas element. Snowflakes are drawn and animated to simulate falling snow, providing a festive and visually pleasing effect. Here's an explanation:

1. Setting Up the Canvas

const canvas = document.getElementById("snow");
const ctx = canvas.getContext("2d");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
  • const canvas = document.getElementById("snow");: Selects the <canvas> element with the id of "snow".
  • const ctx = canvas.getContext("2d");: Gets the 2D rendering context for drawing.
  • canvas.width and canvas.height: Sets the canvas size to match the browser's viewport dimensions.

2. Snowflake Initialization

const snowflakes = [];
for (let i = 0; i < 200; i++) {
    snowflakes.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        radius: Math.random() * 3 + 1,
        speed: Math.random() * 2 + 0.5,
    });
}
  • const snowflakes = [];: Creates an array to store snowflake objects.
  • for (let i = 0; i < 200; i++) { ... }: Loops 200 times to generate 200 snowflakes.
  • Each snowflake is an object with:
    • x: Random horizontal position (Math.random() * canvas.width).
    • y: Random vertical position (Math.random() * canvas.height).
    • radius: Random size between 1 and 4 pixels (Math.random() * 3 + 1).
    • speed: Random falling speed between 0.5 and 2.5 pixels per frame (Math.random() * 2 + 0.5).

3. Drawing Snowflakes

function drawSnowflakes() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    snowflakes.forEach((flake) => {
        const gradient = ctx.createRadialGradient(
            flake.x,
            flake.y,
            0,
            flake.x,
            flake.y,
            flake.radius
        );
        gradient.addColorStop(0, "rgba(255, 255, 255, 1)");
        gradient.addColorStop(0.5, "rgba(255, 255, 255, 0.8)");
        gradient.addColorStop(1, "rgba(255, 255, 255, 0)");

        ctx.fillStyle = gradient;
        ctx.beginPath();
        ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI * 2);
        ctx.fill();
    });
}
  • ctx.clearRect(0, 0, canvas.width, canvas.height);: Clears the canvas for each frame to prevent overlapping trails.
  • snowflakes.forEach((flake) => { ... }): Loops through all snowflakes to draw them.
  • Gradient Creation:
    • ctx.createRadialGradient: Creates a gradient to give the snowflakes a glowing effect.
    • addColorStop: Adds stops for different transparency levels (bright center fading outward).
  • Drawing the Snowflake:
    • ctx.beginPath();: Starts a new drawing path.
    • ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI * 2);: Draws a circle representing a snowflake.
    • ctx.fill();: Fills the circle with the gradient.

4. Updating Snowflake Positions

function updateSnowflakes() {
    snowflakes.forEach((flake) => {
        flake.y += flake.speed; // Move down by speed.
        if (flake.y > canvas.height) { // Reset position if off-screen.
            flake.y = 0;
            flake.x = Math.random() * canvas.width;
        }
    });
}
  • flake.y += flake.speed;: Moves each snowflake down based on its speed.
  • if (flake.y > canvas.height) { ... }: Resets the snowflake to the top when it falls off the bottom, with a new random horizontal position.

5. Animation Loop

function animate() {
    drawSnowflakes();
    updateSnowflakes();
    requestAnimationFrame(animate);
}

animate();
  • function animate(): The main animation loop.
    • drawSnowflakes(): Draws the current state of snowflakes.
    • updateSnowflakes(): Updates their positions for the next frame.
  • requestAnimationFrame(animate): Continuously calls animate() to create smooth animations.
const canvas = document.getElementById("snow");
const ctx = canvas.getContext("2d");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const snowflakes = [];
for (let i = 0; i < 200; i++) {
    snowflakes.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        radius: Math.random() * 3 + 1,
        speed: Math.random() * 2 + 0.5,
    });
}

function drawSnowflakes() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    snowflakes.forEach((flake) => {
        const gradient = ctx.createRadialGradient(
            flake.x,
            flake.y,
            0,
            flake.x,
            flake.y,
            flake.radius
        );
        gradient.addColorStop(0, "rgba(255, 255, 255, 1)");
        gradient.addColorStop(0.5, "rgba(255, 255, 255, 0.8)");
        gradient.addColorStop(1, "rgba(255, 255, 255, 0)");

        ctx.fillStyle = gradient;
        ctx.beginPath();
        ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI * 2);
        ctx.fill();
    });
}

function updateSnowflakes() {
    snowflakes.forEach((flake) => {
        flake.y += flake.speed;
        if (flake.y > canvas.height) {
            flake.y = 0;
            flake.x = Math.random() * canvas.width;
        }
    });
}

function animate() {
    drawSnowflakes();
    updateSnowflakes();
    requestAnimationFrame(animate);
}

animate();

Final Output:

create-merry-christmas-2024-animation-with-html-css-and-javascript.gif
Read Alsousing html and css to build an awesome nft landing page.jpgUsing HTML and CSS to Build an Awesome NFT Landing Page

Conclusion:

Congratulations! You’ve created a Merry Christmas 2024 animation using HTML, CSS, and JavaScript. This project is a great way to add some festive cheer to your website or impress friends and family. You can further enhance it by adding background music or more animations.

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: how to create merry christmas animation with html and css, christmas animation project using javascript step by step, merry christmas 2024 webpage tutorial, christmas festival, christmas wish, christmas animation, javascript animation
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post

Please allow ads on our site🥺