Whenever I will go to the section then the ball falls into the pot. How can I make it with javascript? The animation will not animate continuously. Whenever I'll go to the section then the ball fall into the pot.
The design demo screenshot here
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header, footer{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
header h1 {
font-size: 50px;
}
.animation{
height: 100vh;
background: rgb(29, 81, 85);
background-repeat: no-repeat;
background-position: center;
position: relative;
}
.single_khejur{
position: absolute;
top: 30%; /*30%*/
left: 22%;
}
.pot-image{
position: absolute;
top: 68%;
left: 20%;
}
.single_khejur{
animation: myfirst 5s;
animation-direction: normal;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple javascript</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
</head>
<body>
<header>
<h1>FIRST SECTION</h1>
</header>
<div class="animation">
<div class="col-6 khejur-img">
<div class="single_tree"></div><img src="https://pngimg.com/uploads/palm_tree/palm_tree_PNG93333.png" ></div>
<div class="single_khejur" id="single_khejur"><img src="https://www.pngall.com/wp-content/uploads/5/Sports-Ball-Transparent.png" height="20px"></div>
<div class="single_top"><img class="pot-image" src="https://purepng.com/public/uploads/large/purepng.com-flower-potobjectsplantflowergardeningflower-potclaypotplantingterracotta-911524569335c5oyi.png" height="50px"></div>
</div>
<div class="col-6">
<img src="" ></div>
</div>
<footer>
<h1>THIRD SECTION</h1>
</footer>
</body>
</html>I want to make this animation with javascript or jquery. Whenever I will go to the section then the ball falls into the pot.