"Enhanced Web Interactions with JavaScript Animations

Question

"Enhanced Web Interactions with JavaScript Animations

I've been diving into my JavaScript project lately. I'm currently focusing on creating some cool animations, particularly one that involves making a ball bounce up and down. My code seems to work flawlessly for the downward bounce, but I'm facing some challenges with the upward bounce.

var div = document.getElementById('container-ball');

function createBall(event)
{
    var x = event.clientX;
    var y = event.clientY; 
    var newBall = document.createElement('div');
    newBall.style.position = "absolute"
    newBall.style.width = '15px';
    newBall.style.height = '15px';
    var bx = newBall.style.left = x + 'px';
    var by = newBall.style.top = y + 'px';
    newBall.style.borderRadius = '10px';
    newBall.style.backgroundColor = 'white';
    var incrementPos = 0;
    var id = setInterval(bounce, 5);


    function bounce() 
    {
        incrementPos++;
        by = newBall.style.top = incrementPos + y + "px";
    
        if(by == 650 + "px")
        {
            clearInterval(id);
            var id2 = setInterval(function bounceUp()
            {
                incrementPosYMax -= 650;
                by = newBall.style.bottom = by + "px" - incrementPosYMax;
            }, 5);
        }/*Function that make the ball bounce down and up(but when it came at 650 px it stopped )*/
    } /*End of the set interval */
    div.appendChild(newBall);
}
div.addEventListener("click", createBall);

Below is the corresponding HTML CODE

<html>
<head>
    <link rel= "stylesheet" href="style/style.css">
</head>

<body>

    <div id ="container-ball">
        
    </div>

    <script src="js/main.js"></script>
</body>

javascript html css

Answer 1

Answer №1

Below is a functioning example (with additional comments):

const areaHeight = 150; // originally 650px in height

var div = document.getElementById('container-ball');

function createBall(event) {
  var x = event.clientX;
  var y = event.clientY;
  var newBall = document.createElement('div');
  newBall.className = 'ball';
  var bx = newBall.style.left = x + 'px';
  var by = newBall.style.top = y + 'px';
  var incrementPos = 0;
  var id = setInterval(bounce, 5);

  let direction = 1; // 1 = down, -1 = up

  function bounce() {
    incrementPos += direction;
    by = newBall.style.top = incrementPos + y + "px";

    if (by == areaHeight + "px" || by == y + 'px') {
      direction = -direction;
    }
  }
  
  div.appendChild(newBall);
}

#container-ball {
  width: 300px;
  height: 157px;
  background: gray;
}

#container-ball .ball {
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 10px;
  background-color: white;
  border: 1px solid #333;
  box-sizing: border-box;
}

<div id="container-ball" onclick="createBall(event)"></div>
Click on the grey box

Here is the explanation:

The ball's styles are now controlled by CSS for easier management in the future. The class for the ball is assigned using newBall.className = 'ball';
The incrementPosYMax variable was removed as its purpose was unclear
The ball behavior was interpreted as a simple bounce to the floor and back to its original position
Only one setInterval function is used for the animation as the program is small
A direction variable was added to control the ball's movement direction (1 = down, -1 = up)
Existing code for handling the ball's position boundaries were preserved
Any bugs in the code can be addressed once the correct approach is confirmed

Explanation of the movement direction:

The line
```
by = newBall.style.top = incrementPos + y + "px";
```
updates the ball's vertical position based on the sum of the original y coordinate and the incremental position value
In the original code, the offset was increased by 1 on each bounce step with incrementPos++;
To change direction, 1 must be subtracted on each bounce step
The direction is controlled by the direction variable (1 for down, -1 for up)
The offset is updated using incrementPos += direction; to incorporate the direction
Direction changes occur with direction = -direction;
The boundaries for direction changes are checked using
```
if (by == areaHeight + "px" || by == y + 'px')
```

Answer 2

Below is a functioning example (with additional comments):

const areaHeight = 150; // originally 650px in height

var div = document.getElementById('container-ball');

function createBall(event) {
  var x = event.clientX;
  var y = event.clientY;
  var newBall = document.createElement('div');
  newBall.className = 'ball';
  var bx = newBall.style.left = x + 'px';
  var by = newBall.style.top = y + 'px';
  var incrementPos = 0;
  var id = setInterval(bounce, 5);

  let direction = 1; // 1 = down, -1 = up

  function bounce() {
    incrementPos += direction;
    by = newBall.style.top = incrementPos + y + "px";

    if (by == areaHeight + "px" || by == y + 'px') {
      direction = -direction;
    }
  }
  
  div.appendChild(newBall);
}

#container-ball {
  width: 300px;
  height: 157px;
  background: gray;
}

#container-ball .ball {
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 10px;
  background-color: white;
  border: 1px solid #333;
  box-sizing: border-box;
}

<div id="container-ball" onclick="createBall(event)"></div>
Click on the grey box

Here is the explanation:

The ball's styles are now controlled by CSS for easier management in the future. The class for the ball is assigned using newBall.className = 'ball';
The incrementPosYMax variable was removed as its purpose was unclear
The ball behavior was interpreted as a simple bounce to the floor and back to its original position
Only one setInterval function is used for the animation as the program is small
A direction variable was added to control the ball's movement direction (1 = down, -1 = up)
Existing code for handling the ball's position boundaries were preserved
Any bugs in the code can be addressed once the correct approach is confirmed

Explanation of the movement direction:

The line
```
by = newBall.style.top = incrementPos + y + "px";
```
updates the ball's vertical position based on the sum of the original y coordinate and the incremental position value
In the original code, the offset was increased by 1 on each bounce step with incrementPos++;
To change direction, 1 must be subtracted on each bounce step
The direction is controlled by the direction variable (1 for down, -1 for up)
The offset is updated using incrementPos += direction; to incorporate the direction
Direction changes occur with direction = -direction;
The boundaries for direction changes are checked using
```
if (by == areaHeight + "px" || by == y + 'px')
```

"Enhanced Web Interactions with JavaScript Animations

Answer №1

Similar questions

Adjusting the opacity of images in a Bootstrap 4 Jumbotron without affecting the text

Getting the Value from a Promise into a Variable in a React Component

How to retrieve video duration in Angular 2 before uploading the file

Error encountered when attempting to retrieve data from a JSON object

HTML: Organize a slightly intricate column in a table

"Keep a new tab open at all times, even when submitting a form in

Challenge encountered while creating a child tag that can be assigned to multiple parent tags

Issue with Bootstrap 5 navbar dropdown: It opens easily but struggles to close

Issue with custom font display malfunction

The donut chart in Chart.js is stuck in grayscale without any colorization

Press the button in an HTML document to activate JavaScript

Assign a unique identifier to the Angular mat-checkbox component

Is it possible to use "/path/{?}" in a path when working with Node.js?

The ability to choose only one option in a checkbox within a grid view column

Setting the default value for a dropdown in Angular 2 using Kendo UI

Get the source of a nested iframe inside a parent iframe

Searching through a JSON object on a Laravel web page using JavaScript or AJAX for live filtering purposes

Creating a fully responsive HTML page with a fullscreen image background

Border shifts on hover effect

Error: Unable to access the 'CustomerId' property because it is undefined