A Guide to Creating a Dynamic Custom < body > Background Animation: HTML, CSS, and JavaScript @rayen-code

Rayen

Adding a captivating background animation to your website's <body> element can significantly enhance its visual appeal and user engagement. In this tutorial, we'll take you through the steps of creating a custom background animation using HTML, CSS, and JavaScript. Elevate your website's aesthetics with an eye-catching and dynamic background that leaves a lasting impression on your visitors.




Step 1: HTML Markup:

Start by setting up the basic HTML structure for your webpage. 
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background animation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    

    <script src="main.js"></script>
</body>
</html>

Step 2: Styling with CSS:

Create a separate CSS file (style.css) to style the background container and define the animation. 
/*-------------------- CSS --------------------*/
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root{
    --color: #fffb00;
}

body{
    height: 100vh;
    background: black;
    overflow: hidden;
}

.star{
    position: absolute;
    bottom: 0;
    width: 20px;
    aspect-ratio: 1/1;
    background: var(--color);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--color),
    0 0 20px var(--color),
    0 0 30px var(--color),
    0 0 50px var(--color);

    animation: anime 5s linear forwards;
}

@keyframes anime {
    0%{
        transform: translateY(0);
        opacity: 1;
    }
    50%{
        opacity: 1;
    }
    100%{
        transform: translateY(-100vh);
        opacity: 0;
    }
}

.star::before{
    content: "";
    position: absolute;
    width: 50%;
    left: 25%;
    height: 100vh;
    background: linear-gradient(var(--color), transparent);
}

Step 3: Adding JavaScript Interaction:

Create a JavaScript file (script.js) to trigger the background animation.
//-------------------- Java Script --------------------//
star = ()=>{
    let div = document.createElement("div");
    let size = Math.random() * 12;
    let time = Math.random() * 3;

    div.setAttribute("class", "star");

    document.body.appendChild(div);

    div.style.left = Math.random() * + innerWidth + "px";
    div.style.width = 2 + size + "px";
    div.style.animationDuration = 2 + time + "s";



setTimeout(
    ()=>{
        document.body.removeChild(div);
    }, 5000
)
}

setInterval(
    ()=>{
        star();
    }, 300
);

You can customize the animation's properties, duration, colors, and timing function to match your website's design. Experiment with different keyframes and transitions to achieve the desired visual effect.

Congratulations! You've successfully created a captivating custom <body> background animation using HTML, CSS, and JavaScript. This dynamic element can elevate your website's aesthetics and provide a visually engaging experience for your visitors.

Feel free to implement this background animation on your website to leave a lasting impression on your audience. The skills you've gained from this tutorial will allow you to create more interactive and visually appealing user interfaces.

0 Comments