I was working on a task and suddenly this idea kicked in, so I took help from Chatgpt to draft a simple html app and improved it.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Levitating Balls</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<p class="small-title">Quick app ✨</p>
<h1 class="title">Levitating Balls</h1>
<div class="balls-container">
<div id="ball-mid" class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
style.css
body {
margin: 0;
padding: 0;
}
.container {
height: 100vh;
position: relative;
display: grid;
place-content: center;
overflow: hidden;
background: blue;
}
.title {
font-size: 8em;
font-family: monospace;
color: white;
}
.small-title {
font-size: 2em;
font-family: monospace;
color: white;
text-align: start;
}
.balls-container {
height: 100%;
width: 100%;
position: absolute;
}
.ball {
position: absolute;
width: 8em;
height: 8em;
border: 3px solid rgb(255, 255, 255);
background-color: blue;
border-radius: 50%;
transition: transform 2s;
}
script.js
const balls = document.getElementsByClassName('ball');
let drop = 0;
setInterval(() => {
console.log({ drop });
for (let i = 0; i < balls.length; i++) {
if (drop) {
console.log('top');
balls[i].style.transform = `translateY(${Math.random() * 90}vh)`;
} else {
balls[i].style.transform = `translateY(${90}vh)`;
}
balls[i].style.transform += `translateX(${Math.random() * 90}vw)`;
const zIndex = parseInt(Math.random() * 3);
console.log({zIndex})
balls[i].style.zIndex = `${zIndex}`;
}
drop = !drop;
}, [2000]);
Top comments (0)