Pixel Animation in Background : 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 Pixel animation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

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

    <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 --------------------*/
/* style.css */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
#container{
    background: black;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}
.pixel{
    position: relative;
    width: 30px;
    height: 30px;
    background: #1a1a1a;
}

.on_off{
    animation:  anime 2s linear forwards;
}
@keyframes anime {
    0%{
        filter: hue-rotate(0deg);
    }
    50%{
        background: rgb(255, 0, 242);
    }
    100%{
        filter: hue-rotate(360deg);
    }
}

Step 3: Adding JavaScript Interaction:

Create a JavaScript file (script.js) to trigger the background animation.
//-------------------- Java Script --------------------//
// main.js

let container = document.getElementById("container");

for(let i = 1; i <= 2500; i++){
    let pixel = document.createElement("span");
    pixel.setAttribute("class", "pixel");
    container.appendChild(pixel);
}

animate = ()=>{
    let all_pixel = document.querySelectorAll(".pixel");
    let position = Math.floor(Math.random()*all_pixel.length);
    all_pixel[position].classList.toggle("on_off");
}

setInterval(animate);

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