How do I create a notification when the div reaches 100% alignment on the left side using Javascript?

Question

How do I create a notification when the div reaches 100% alignment on the left side using Javascript?

Is there a way to receive an alert when the div with the class name "earth" reaches 100% on the left side, without using jQuery? I attempted to utilize setTimeout but I am looking for an alternative method that does not rely on time, but rather on position.

<!DOCTYPE html>
<html>
<head>
    <style>
    .earth {
        position :relative;
        animation:move 10s linear;
        background:red;
        height:20px;
        width:20px;
    }

    @-webkit-keyframes move
    {
        from { left: 0%;  }
        to { left: 100%; }
    }
    </style>
    <script>
    function changetext () {
        document.getElementById("demo").style.color = "red";
        animation();
    }

    function animation() {
        document.getElementById('ghost').className ='earth';
    }

    function repeat() {
        var sd = document.getElementById("ghost").className = 'earth';
        sd.style.display = 'none';
    }
    </script>
</head>
<body>
    <div class="something"></div>
    <div id="ghost"> </div>
    <p onclick="changetext();" id="demo"> HELLO WORLD </p>
</body>
</html>

javascript css

Answer 1

Answer №1

If you want to trigger a function when an animation ends, you can utilize the animationend event:

var anim = document.querySelector(".earth");
anim.addEventListener("animationend", function() {
  console.log('Animation ended!');
});

.earth {
  position: relative;
  animation: move 10s linear;
  background: red;
  height: 20px;
  width: 20px;
}

@-webkit-keyframes move {
  from {
    left: 0%;
  }
  to {
    left: 100%;
  }
}

<div class="earth"></div>

Answer 2

If you want to trigger a function when an animation ends, you can utilize the animationend event:

var anim = document.querySelector(".earth");
anim.addEventListener("animationend", function() {
  console.log('Animation ended!');
});

.earth {
  position: relative;
  animation: move 10s linear;
  background: red;
  height: 20px;
  width: 20px;
}

@-webkit-keyframes move {
  from {
    left: 0%;
  }
  to {
    left: 100%;
  }
}

<div class="earth"></div>

How do I create a notification when the div reaches 100% alignment on the left side using Javascript?

Answer №1

Similar questions

When a Mui Button is clicked, it changes the color of all tabs instead of just the active

Utilize Google Drive and scripts to incorporate map images into a React application

JavaScript Autocomplete - retrieving the value of a label

Learn how to implement a vertical bar chart in Highcharts by using it as a component and passing it as props

Combine a string and integer in JavaScript without using quotation marks between them

Adding additional validations to your Marketo form is a great way to ensure the accuracy

Ways to access a particular property of a child component object from the parent component

Executing Selenium WebDriver to interact with a hidden element

Triggering the creation of an Algolia Index from Firestore operations like updates, deletions, and additions is causing significant delays

What is the best way to add items to arrays with matching titles?

Leverage the power of Angular to seamlessly integrate jQuery code across your

Error: Attempting to assign a value to the property 'running' of an undefined variable

Is there a way to split each foreach value into distinct variables?

Adjusting a parameter according to the width of the browser window?

Highcharts - resolving cross-browser e.Offset discrepancies in mouse event detection on charts

What is the best way to access the methods in the "parent" class?

The middleware function in my express server is not being identified

How can I gather information from members who have already signed up?

One effective way to utilize await/async within the Vue mounted lifecycle hook is by

The Discord.js collector seems to have no intention of ending, completely disregarding its keys in order