Prasath V Prasath V - 3 months ago 6
CSS Question

Ball animation using javascript

I did a animation using

javascript
. Using single ball shape goes top of the page. Anybody would help how to create multiple balls like clone.. I just want the following tasks..


  • Animation with multiple balls (Bottom to top)

  • Each ball position (Left position only) is random.

  • Infinite process.



Is it possible to achieve through
javascript
. Thanks in advance :)



.circle{
width: 50px;
height: 50px;
border-radius: 30px;
position: absolute;
bottom: -60px;
left: 2px;
transition: 0.1s;
}
body{
overflow: hidden;
position: relative;
background: violet
}
#box{
width: 100%;
height: 100%;
}

<body>

<div id="box"></div>
<script type="text/javascript">
var colors = ['red', 'yellow', 'blue', 'green', 'brown', 'violet'];
var windowHeight = 0;
var parendElement;
window.onload = function () {
parendElement = document.getElementById("box");
windowHeight = window.innerHeight;
document.body.style.height = windowHeight + "px";
console.log(document.body.style.height);
generateBall();
};
function generateBall() {

var leftPos = Math.floor((Math.random() * window.innerWidth) - 30);
var para = document.createElement("p");
para.setAttribute("class", 'circle');
para.style.background = colors[Math.floor(Math.random() * colors.length)];
para.style.left = leftPos + "px";
parendElement.appendChild(para);
var btmPos = 0;
var animationInterval = setInterval(function () {
if (btmPos < windowHeight) {
btmPos += 5;
} else {
console.log("yes");
clearInterval(animationInterval);
parendElement.removeChild(para);
}
para.style.bottom = btmPos + "px";
para.style.left = leftPos + "px";
}, 100);
}
</script>
</body>




Answer

Just add this code
var interval = setInterval(function () { generateBall(); }, 1000);

into your window.onload(). It works :) ..

.circle{
    width: 50px;
    height: 50px;
    border-radius: 30px;
    position: absolute;
    bottom: -60px;
    left: 2px;
    transition: 0.1s;
}
body{
    overflow: hidden;
    position: relative;
    background: violet
}
#box{
    width: 100%;
    height: 100%;
}
<body>
  
  <div id="box"></div>
    <script type="text/javascript">
        var colors = ['red', 'yellow', 'blue', 'green', 'brown', 'violet'];
var windowHeight = 0;
var parendElement;
window.onload = function () {
    parendElement = document.getElementById("box");
    windowHeight = window.innerHeight;
    document.body.style.height = windowHeight + "px";
    console.log(document.body.style.height);
    generateBall();
  
    //Creates ball for every 1 second interval
    var interval = setInterval(function () {
        generateBall();
    }, 1000);
};
function generateBall() {
    
    var leftPos = Math.floor((Math.random() * window.innerWidth) - 30);
    var para = document.createElement("p");
    para.setAttribute("class", 'circle');
    para.style.background = colors[Math.floor(Math.random() * colors.length)];
    para.style.left = leftPos + "px";
    parendElement.appendChild(para);
    var btmPos = 0;
    var animationInterval = setInterval(function () {
        if (btmPos < windowHeight) {
            btmPos += 5;
        } else {
            console.log("yes");
            clearInterval(animationInterval);
            parendElement.removeChild(para);
        }
        para.style.bottom = btmPos + "px";
        para.style.left = leftPos + "px";
    }, 100);
}
    </script>
</body>

Comments