Out-of-sync movement in animated characters

Looking for some assistance with my page coding. I have a scenario where two stars are moving around a button, simulating an animation by incrementing the CSS properties top and left. Initially, everything appears fine and they move synchronously. However, after a few minutes, the stars start to fall out of sync, reaching corners at different times. Can anyone shed light on why this might be happening and suggest potential fixes? For reference, here is the JSFiddle link: https://jsfiddle.net/MCBlastoise/1503x4tr/12/

Below is the snippet of the code:

body {
margin:0px;
}
.heading {
text-align:center;
font-family:'Bungee Shade', Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace;
color:green;
font-weight:bold;
font-size:30px;
margin-top:0px;
}
.text {
color:red;
font-family:'Josefin Sans', Futura, Trebuchet MS, Arial, sans-serif;
font-size:21px;
text-align:justify;
margin-top:-15px;
}
br {
line-height:500%;
}
.container {
position:relative;
width:350px;
height:350px;
margin-top:42px;
margin-left:auto;
margin-right:auto;
}
.star {
width:40px;
height:40px;
position:absolute;
}
#starOne {
top:0px;
left:0px;
}
#starTwo {
top:310px;
left:310px;
}
.button {
width:250px;
height:250px;
border-style:solid;
border-color:red;
border-width:5px;
border-radius:60px;
text-align:center;
position:absolute;
bottom:50px;
left:50px;
}
.button:hover {
background-color: #7CFC00;
cursor:pointer
}
.button-text {
font-family:'Righteous', Courier New;
color:#9400D3;
font-size:76px;
line-height:125%;
}
#compliment {
text-align:center;
font-family:'VT323', Candara, Calibri, Segoe, Segoe UI, Optima, Arial, sans-serif;
color:#ffd400;
font-size:50px;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="Complement.css">
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bungee+Shade|Josefin+Sans|VT323|Righteous">
<title>The Compliment Machine</title>
</head>
<body>
<h2 class="heading">The Compliment Machine</h2>
<p class="text">In the interest of spreading holiday cheer, I have designed this website with one goal in mind. Pressing the button below will randomly generate a compliment. Hopefully, this little experiment will brighten up your day.</p>
<div class="container" id="container">
<img src="Star.png" class="star" id="starOne">
<div class="button" onclick="timedFunction()" onmouseenter="startingFunction(), startingFunction2()" onmouseleave="endFunction()"> <span class="button-text">Click me!</span> </div>
<img src="Star.png" class="star" id="starTwo">
</div>
<br>
<p id="compliment"></p>

<script>
var userName = prompt("What is your name?");
var generatedUserName = userName === null || userName === "";
var compliment = [
"Have a nice day",
"you contribute to society",
"Always be yourself",
"you are a wonderful person",
"Keep up the good work",
"never stop believing in yourself",
"you have a great sense of humor",
"You should feel proud of yourself",
"Never stop trying",
"you are a winner"
];
</script>

<script>
function timedFunction() {
document.getElementsByTagName("DIV")[0].style.display = "none";
document.getElementsByTagName("DIV")[1].style.display = "none";
document.getElementsByTagName("IMG")[0].style.display = "none";
document.getElementsByTagName("IMG")[1].style.display = "none";
var repeater = setInterval(inspiration, 1000);
}
var inspiration = function inspire() {
var result = Math.random();

//This code block checks for null, undefined, and other falsy values in the prompt.
if (generatedUserName) {
if (0 <= result && result < 0.11) {
userName = "my friend";
}
if (0.21 <= result && result < 0.31) {
userName = "my friend";
}
if (0.41 <= result && result < 0.51) {
userName = "my friend";
}
if (0.71 <= result && result < 0.81) {
userName = "my friend";
}
if (0.81 <= result && result < 0.91) {
userName = "my friend";
}
if (0.11 <= result && result < 0.21) {
userName = "My friend";
}
if (0.31 <= result && result < 0.41) {
userName = "My friend";
}
if (0.51 <= result && result < 0.61) {
userName = "My friend";
}
if (0.61 <= result && result < 0.71) {
userName = "My friend";
}
if (0.91 <= result && result < 1) {
userName = "My friend";
}
}

//This code block changes the sentence with ID 'compliment' randomly, based on the value of the variable 'result'.
if (0 <= result && result < 0.11) {
document.getElementById("compliment").innerHTML = compliment[0]+", "+userName+"!";
};
if (0.11 <= result && result < 0.21) {
document.getElementById("compliment").innerHTML = userName+", "+compliment[1]+".";
};
if (0.21 <= result && result < 0.31) {
document.getElementById("compliment").innerHTML = compliment[2]+", "+userName+".";
};
if (0.31 <= result && result < 0.41) {
document.getElementById("compliment").innerHTML = userName+", "+compliment[3]+".";
};
if (0.41 <= result && result < 0.51) {
document.getElementById("compliment").innerHTML = compliment[4]+", "+userName+"!";
};
if (0.51 <= result && result < 0.61) {
document.getElementById("compliment").innerHTML = userName+", "+compliment[5]+".";
};
if (0.61 <= result && result < 0.71) {
document.getElementById("compliment").innerHTML = userName+", "+compliment[6]+".";
};
if (0.71 <= result && result < 0.81) {
document.getElementById("compliment").innerHTML = compliment[7]+", "+userName+".";
};
if (0.81 <= result && result < 0.91) {
document.getElementById("compliment").innerHTML = compliment[8]+", "+userName+".";
};
if (0.91 <= result && result < 1) {
document.getElementById("compliment").innerHTML = userName+", "+compliment[9]+".";
};
}
var i = 0;
function limitedFunction() {
inspiration();
i++;
if (i === 5) {
document.getElementsByTagName("DIV")[0].style.display = "none";
document.getElementsByTagName("DIV")[1].style.display = "none";
document.getElementsByTagName("IMG")[0].style.display = "none";
document.getElementsByTagName("IMG")[1].style.display = "none";
}
}
</script>

<script>
var starOne = document.getElementById("starOne");
var starTwo = document.getElementById("starTwo");
var posLeft = 0;
var posTop = 0;
var posLeft2 = 310;
var posTop2 = 310;

var startingFunction = function starterFunction() {
toRight = setInterval(moveRight, 1);
}
var startingFunction2 = function starterFunction2() {
toLeft = setInterval(moveLeft, 1);
}

//The following four functions apply to the first star, which begins at the top-left.
function moveRight() {
posLeft++;
starOne.style.left = posLeft + 'px';
if (starOne.style.left === "310px") {
clearInterval(toRight);
toBottom = setInterval(moveDown, 1);
}
}

function moveDown() {
posTop++;
starOne.style.top = posTop + 'px';
if (starOne.style.top === "310px") {
clearInterval(toBottom);
toLeft2 = setInterval(moveLeft2, 1);
}
}

function moveLeft2() {
posLeft--;
starOne.style.left = posLeft + 'px';
if (starOne.style.left === "0px") {
clearInterval(toLeft2);
toTop2 = setInterval(moveUp2, 1);
}
}

function moveUp2() {
posTop--;
starOne.style.top = posTop + 'px';
if (starOne.style.top === "0px") {
clearInterval(toTop2);
startingFunction();
}
}


//The following four functions apply to the second star, which begins at the bottom-right.
function moveLeft() {
posLeft2--;
starTwo.style.left = posLeft2 + 'px';
if (starTwo.style.left === "0px") {
clearInterval(toLeft);
toTop = setInterval(moveUp, 1);
}
}

function moveUp() {
posTop2--;
starTwo.style.top = posTop2 + 'px';
if (starTwo.style.top === "0px") {
clearInterval(toTop);
toRight2 = setInterval(moveRight2, 1);
}
}

function moveRight2() {
posLeft2++;
starTwo.style.left = posLeft2 + 'px';
if (starTwo.style.left === "310px") {
clearInterval(toRight2);
toBottom2 = setInterval(moveDown2, 1);
}
}

function moveDown2() {
posTop2++;
starTwo.style.top = posTop2 + 'px';
if (starTwo.style.top === "310px") {
clearInterval(toBottom2);
startingFunction2();
}
}


//Animation cancellation function when mouse leaves the button.
function endFunction() {
//First star in top-left corner
if (0 <= posLeft && posLeft <= 310 && posTop === 0) {
clearInterval(toRight);
}
if (0 <= posTop && posTop <= 310 && posLeft === 310) {
clearInterval(toBottom);
}
if (0 <= posLeft && posLeft <= 310 && posTop === 310) {
clearInterval(toLeft2);
}
if (0 <= posTop && posTop <= 310 && posLeft === 0) {
clearInterval(toTop2);
}

//Second star in bottom-right corner
if (0 <= posLeft2 && posLeft2 <= 310 && posTop2 === 310) {
clearInterval(toLeft);
}
if (0 <= posTop2 && posTop2 <= 310 && posLeft2 === 0) {
clearInterval(toTop);
}
if (0 <= posLeft2 && posLeft2 <= 310 && posTop2 === 0) {
clearInterval(toRight2);
}
if (0 <= posTop2 && posTop2 <= 310 && posLeft2 === 310) {
clearInterval(toBottom2);
}
posLeft = 0;
posTop = 0;
posLeft2 = 310;
posTop2 = 310;
starOne.style.top = posTop + 'px';
starOne.style.left = posLeft + 'px';
starTwo.style.top = posTop2 + 'px';
starTwo.style.left = posLeft2 + 'px';
}
</script>

</body>
</html>

javascripthtmlcssanimation

Answer №1

Have you considered using a different approach, such as utilizing the css animation property for the animation instead of relying on setInterval? You can define keyframes and animate the stars on hover. Check out the example below:

var starOne = document.getElementById("starOne");
var starTwo = document.getElementById("starTwo");
var posLeft = 0;
var posTop = 0;
var posLeft2 = 310;
var posTop2 = 310;
document.getElementById("btn").addEventListener("mouseover",function(){
    starOne.classList.add("topStarAnimate");
    starTwo.classList.add("bottomStarAnimate");
});
document.getElementById("btn").addEventListener("mouseleave",function(){
    starOne.classList.remove("topStarAnimate");
    starTwo.classList.remove("bottomStarAnimate");
});
body {
    margin:0px;
}
.heading {
    text-align:center;
    font-family:'Bungee Shade', Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace;
    color:green;
    font-weight:bold;
    font-size:30px;
    margin-top:0px;
}
.text {
    color:red;
    font-family:'Josefin Sans', Futura, Trebuchet MS, Arial, sans-serif;
    font-size:21px;
    text-align:justify;
    margin-top:-15px;
}
br {
    line-height:500%;
}
.container {
    position:relative;
    width:350px;
    height:350px;
    margin-top:42px;
    margin-left:auto;
    margin-right:auto;
}
.star {
    width:40px;
    height:40px;
    position:absolute;
}
#starOne {
    top:0px;
    left:0px;
}
#starTwo {
    top:310px;
    left:310px;
}
@keyframes topstar {
    0%,100%{
        top:0px;
        left:0px;
    }
    25%{
        top:0px; 
        left:310px;
    }
    50%{
        top:310px;
        left:310px;
    }
    75%{
        top:310px;
        left:0px;
    }
}
@keyframes bottomstar {
    0%,100%{
        top:310px;
        left:310px;
    }
    25%{
        top:310px; 
        left:0px;
    }
    50%{
        top:0px;
        left:0px;
    }
    75%{
        top:0px;
        left:310px;
    }
}
.topStarAnimate{
    animation: topstar 4s infinite;
}
.bottomStarAnimate{
    animation: bottomstar 4s infinite;
}
.button {
    width:250px;
    height:250px;
    border-style:solid;
    border-color:red;
    border-width:5px;
    border-radius:60px;
    text-align:center;
    position:absolute;
    bottom:50px;
    left:50px;
}
.button:hover {
    background-color: #7CFC00;
    cursor:pointer
}
.button-text {
    font-family:'Righteous', Courier New;
    color:#9400D3;
    font-size:76px;
    line-height:125%;
}
<!DOCTYPE html>
<title>The Compliment Machine</title>
<body>
<div class="container" id="container">
<img src="Star.png" class="star" id="starOne">
<div class="button" onclick="timedFunction()" id="btn"> <span class="button-text">Click me!</span> </div>
<img src="Star.png" class="star" id="starTwo">
</div>
<br>
<p id="compliment"></p>

</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to display x squared as a superscript inside a button element?

In my reactjs project, I am developing a basic calculator. One of the buttons is supposed to calculate x squared, and I tried using the <sup> HTML element for this purpose but it did not work as expected. <Button name = "x<sup>2</sup> ...

htmlreactjs

Place the image at right:0px position, but it won't display

I am trying to position an image at the end of a sentence within a div element. No matter what I try, the image always appears next to the end of my text. Here is the code I am using: <div id='xi' class='xc'>Text comes here and ...

jquerycss

What is the best way to position the wizard on both the left and right sides of the screen

Currently, here's the code I have, and I want it to appear like this. What are the steps needed to adjust the CSS in order to achieve that? .nav-wizard { display: table; width: 100%; } .nav-wizard > li { display: table-cell; text-align: ...

csstwitter-bootstraptwitter-bootstrap-3

Transferring data from PHP to an HTML function

I have attempted to retrieve the coordinates generated by the geocode and passed them to the function initialize in order to display a map with the location. Despite transferring the variables from PHP to the function initialize(), it seems that the lati ...

phphtmlfunction

Whenever I adjust the layout of the navigation bar, the edges end up getting clipped

I'm having trouble with the border shape of my navbar. When I try to make it a rounded pill shape, the edges get cut off instead of being properly displayed. https://i.stack.imgur.com/sUN2Y.png Below is the HTML template: <template> <div cl ...

javascriptcssvue.jsbootstrap-4bootstrap-5

Implement a maximum height restriction on the children of the Select component in Material-UI

Currently, I am working with the Material-UI react library to create Dropdown menus by utilizing components like <FormControl>, <Select>, and <MenuItem>. The options array for these dropdown menus is quite extensive, and I am looking to s ...

cssreactjsmaterial-ui

Pass an item along with its superclass using express

Is there a way to send an object from an express server and then check the instanceof of that object on the receiving end? I am working on integration tests for express and need to verify the instanceof of the response body. Unfortunately, it seems like t ...

javascriptnode.jsexpress

Using SCSS to apply a class in Next.js

Currently, I am working on a project using Next.js and implementing the SCSS module procedure for styling. An example component directory structure is as follows: SampleComponent -> index.tsx and SampleComponent.module.scss The code in SampleComponent ...

javascriptcssreactjssassnext.js

The issue of unselection not functioning properly for multiple items when using both selectable and draggable features

i need the unselection of list items to be as smooth as selectable() but without draggable() My desired outcome is similar to the following gif showcasing combined selectable and draggable functionality: https://i.stack.imgur.com/3GjTD.gif here's t ...

javascriptjqueryhtmljquery-uidraggable

Using three.js inside Colab

Here are some examples showcasing bi-directional communications between Python and JavaScript in Google Colab: I'm trying to get this simple three.js demo to work in Colab. Any tips? Despite the seemingly straightforward source code, I'm facing ...

javascriptpythonthree.jsfetchgoogle-colaboratory

Is there a way to make a picture fill the entire background?

Is there a way to make pictures expand across an entire page with different resolutions? I'm trying to achieve this effect but unsure how. Take a look at my current example: . ...

javascripthtmlcssimage

Identifying a specific field in a dynamically generated React.js component: Best practices

Currently, I am in the process of developing a form with an undetermined number of sensor fields. The front end has been successfully implemented and now my focus is on extracting user information from these dynamically generated component fields. Here is ...

javascriptreactjs

I'm feeling completely lost trying to understand cors in conjunction with fetch, particularly when an options request is

I am using whatwg fetch in the code snippet below: const headers = new Headers(); //uncommenting this causes the preflight options request to be sent //headers.append('x-something', 'foo'); const response = await fetch(&apos ...

javascriptajaxgoogle-chromecorsfetch

Send users from the web (using JavaScript) to the Windows Phone app, and if the app is not installed, direct them

In the following code snippet, I am using angular.js to detect the mobile platform and redirect to the native app. If the app is not installed, it will redirect to the market: $scope.isMobile = { Android: function() { return navigator.userAgent.ma ...

javascriptangularjswindows-phone-8

How to style large numbers with AngularJS

I'm facing a challenge with large numbers in a table and I'm seeking a solution to format them, ideally as $13b, $10m... Has anyone encountered this issue before and discovered a customized filter or solution for it? Appreciate any help! ...

javascriptangularjsfilternumbersformat

The JQuery code is failing to remove the dynamically added field when the delete icon is clicked

Information: I am currently navigating the world of programming and attempting to build a To-Do List feature. When the create list button is clicked, a dynamically generated div with the class 'wrap' is created. This div contains two nested divs: ...

jqueryhtmlcss

Displaying multi-dimensional arrays through the console in JavaScript and showcasing their elements

My array is supposed to have 140 indexes in a single format like this: array:[0-140] //however, it currently appears as: array: [ 0: [0-99], 1: [100-140] ] I've confirmed multiple times that it is just one array of objects. Why is it s ...

javascriptarraysangularjs

Combining an input box and label on a single line with the help of Bootstrap

Hi, I'm Sonal and I'm currently utilizing a Modal on my website. Within this Modal, I am looking to create a form with labels and input boxes displayed on the same line. Below is the code snippet I am working with: <a data-toggle="modal" hre ...

htmlcsstwitter-bootstrap

unable to toggle the navbar

Currently, I am facing an issue with the navbar-toggle button while using Bootstrap. Initially, I thought the problem was with my navbar code, so I tried pasting the example from the Bootstrap Website, but it did not work either. The button appears, but t ...

javascriptjquerycssangularjstwitter-bootstrap

Deciphering the intricacies of VUEX-STORE modules

Consider this scenario: I have two separate lists - one for income and one for outcome. Each list has its own storage, and I am adding these storages as modules in index.js. While I could create a single repository for both income and outcome, displaying ...

javascriptvuejs2vuexstorevuex-modules