Currently, I am experimenting with CSS effects. In my code, I have included div elements to display balls on the document body, each with random sizes and colors. However, an unexpected issue has arisen - excess scroll space is being generated due to the code implementation. The extra scroll affects both horizontal and vertical orientations of the page.
The structure of the HTML page is intended to remain concise, typically not exceeding two lines in total length.
To view the code for the HTML page that I have created, visit Code Pen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/cae1531884.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Rubik&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
.ball {
position: absolute;
border-radius: 100%;
opacity: 0.7;
}
.headings {
font-family: 'Rubik', sans-serif;
}
.container {
height: 100vh;
padding-left: 2rem;
position: relative;
}
.vertical-center {
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.social-links {
padding: 5px;
color: #121212;
}
</style>
</head>
<body>
<div class="container">
<div class="vertical-center">
<div class="header headings">
<h1>Hello World</h1>
</div>
<div class="content">
<p>Lorem Ipsum</p>
</div>
</div>
</div>
<script>
const colors = ["#3CC157", "#2AA7FF", "#d3d3d3", "#FCBC0F", "#F85F36"];
const numBalls = 50;
const balls = [];
for (let i = 0; i < numBalls; i++) {
let ball = document.createElement("div");
ball.classList.add("ball");
ball.style.background = colors[Math.floor(Math.random() * colors.length)];
ball.style.left = `${Math.floor(Math.random() * 100)}vw`;
ball.style.top = `${Math.floor(Math.random() * 100)}vh`;
ball.style.transform = `scale(${Math.random()})`;
ball.style.width = `${Math.random()}em`;
ball.style.height = ball.style.width;
balls.push(ball);
document.body.append(ball);
}
// Keyframes
balls.forEach((el, i, ra) => {
let to = {
x: Math.random() * (i % 2 === 0 ? -11 : 11),
y: Math.random() * 12
};
let anim = el.animate(
[
{ transform: "translate(0, 0)" },
{ transform: `translate(${to.x}rem, ${to.y}rem)` }
],
{
duration: (Math.random() + 1) * 2000, // random duration
direction: "alternate",
fill: "both",
iterations: Infinity,
easing: "ease-in-out"
}
);
});
</script>
</body>
</html>