I am trying to replicate the grid line animation effect seen on the Acertinity UI homepage using pure HTML, CSS, and JavaScript. Below is a GIF of the animation effect I am referring to:
[Image of the animation][1]
I have basic knowledge of HTML, CSS, and JavaScript but I’m not sure how to implement this particular effect. Can someone guide me on how to achieve this?
Here’s what I’ve tried so far:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Line Animation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<!-- Content goes here -->
</div>
<script src="scripts.js"></script>
</body>
</html>
CSS (styles.css):
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
}
.grid-container {
position: relative;
width: 100%;
height: 100%;
}
.grid-line {
position: absolute;
background-color: rgba(255, 255, 255, 0.1);
}
.horizontal-line {
height: 1px;
width: 100%;
}
.vertical-line {
width: 1px;
height: 100%;
}
JavaScript (scripts.js):
document.addEventListener('DOMContentLoaded', () => {
const gridContainer = document.querySelector('.grid-container');
// Add horizontal lines
for (let i = 0; i < 20; i++) {
const line = document.createElement('div');
line.classList.add('grid-line', 'horizontal-line');
line.style.top = `${i * 5}%`;
gridContainer.appendChild(line);
}
// Add vertical lines
for (let i = 0; i < 20; i++) {
const line = document.createElement('div');
line.classList.add('grid-line', 'vertical-line');
line.style.left = `${i * 5}%`;
gridContainer.appendChild(line);
}
// Add animation logic here
});
I’m not sure how to add the animation to these lines to make them move or pulse like in the GIF. Any help would be greatly appreciated!