create the animation of many dom elements which are launched from the bottom to top and fall in parabolic motion in javascript

To create an animation of many DOM elements launched from the bottom to top and falling in parabolic motion, we can use JavaScript and CSS along with some DOM manipulation.

Here's an example code that demonstrates this animation:


<!DOCTYPE html>
<html>
<head>
	<style>
		.box {
			width: 50px;
			height: 50px;
			position: absolute;
			bottom: 0;
			background-color: red;
			border-radius: 50%;
			transform: translateX(-50%);
		}
	</style>
</head>
<body>
	<button onclick="createBox()">Add Box</button>
	<div id="container"></div>

	<script>
		function createBox() {
			let box = document.createElement('div');
			box.classList.add('box');
			document.getElementById('container').appendChild(box);
			animateBox(box);
		}

		function animateBox(box) {
			let x = Math.floor(Math.random() * (window.innerWidth - 100)) + 50;
			let y = window.innerHeight + 50;
			let time = Math.floor(Math.random() * 4000) + 1000;
			let angle = Math.floor(Math.random() * 90) - 45;

			let keyframes = [
				{ transform: `translate(${x}px, ${y}px) rotate(0deg)` },
				{ transform: `translate(${x}px, ${y/2}px) rotate(${angle}deg)` },
				{ transform: `translate(${x}px, 0px) rotate(0deg)` },
			];

			box.animate(keyframes, {duration: time})
				.onfinish = () => {
					box.parentNode.removeChild(box);
				};
		}
	</script>
</body>
</html>
1101 chars
48 lines

In this code, we first define a CSS class called .box which styles each box element that we want to animate. Then, we create a button and a container div in HTML and define two JavaScript functions.

The createBox() function is called when the button is clicked and creates a new box element, appends it to the container div, and passes it to the animateBox() function.

The animateBox() function generates a random x-coordinate, y-coordinate, time duration, and angle for the box and defines keyframes for the animation. The keyframes specify the transform property of the box at different points in time during the animation. Finally, the animate() method is called on the box element with the keyframes and duration options, and removes the box element from the DOM when the animation finishes.

When you run the code, click the "Add Box" button to launch a new box element from the bottom to top and fall in a parabolic motion. Each box element is animated independently and is removed from the DOM after the animation finishes.

similar javascript code snippets

create the animation of many dom elements which are launched from the bottom to top and fall in parabolic motion in javascript

select an element by attribute in javascript

how to get an element by data attribute in javascript

how to get an element by attribute in javascript

how to toggle a class on an element in javascript

how to check if an element has a class in javascript

how to get an element by tag name in javascript

remove all dom elements which don't have a "data-key" attribute; store those elements into an array and reappend them into the dom when the document is clicked in javascript

react get element by id in javascript

how to get an element by query selector in javascript

related categories