How to stop an animated image from sticking to top of page?


Joined
Dec 14, 2021
Messages
23
Reaction score
1
Well, I have this code that makes a clone of an image and this image has a CSS animation, but if I click the button to make the clone, then sometimes the clone gets stuck at the top of the screen, how would I fix that?

Here is the code:

HTML:
<img id="spinFish" src="assets/img/sprite/Fishy Boii.svg" alt="Spining Fishy Boii"> <!-- The original of the clones -->

<button id="clickBtn" onclick="clickFish()">
    <img id="clickImage" src="assets/img/sprite/Fishy Boii.svg" alt="A Fishy Boii">
</button> <!-- The button that creates the clones -->

CSS:
/* The CSS to the button */
#clickBtn {
    outline: none;
    border: none;
    background: none;
    width: 303px;
    height: 190px;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition: 1.2s;
}

#clickBtn:hover {
    width: 343px;
    height: 230px;
}

#clickBtn:active {
    width: 283px;
    height: 170px;
    transition: 0.4s;
}

#clickImage {
    width: 100%;
    height: 100%;
}

/* CSS to the original of the clones */
#spinFish {
    display: none;
    animation: moveDown 5s linear 1;
    position: absolute;
    top: 0;
    left: 50%;
    width: 5%;
    z-index: -1;
}
@keyframes moveDown {
    0% {
        top: 0%;
        transform: rotate(0deg);
        opacity: 1;
    }
    25% {
        top 25%;
        transform: rotate(90deg);
        opacity: 0.75;
    }
    50% {
        top: 50%;
        transform: rotate(180deg);
        opacity: 0.5;
    }
    75% {
        top: 75%;
        transform: rotate(270deg);
        opacity: 0.25;
    }
    100% {
        top: 100%;
        transform: rotate(360deg);
        opacity: 0;
        display: none;
    }
}

JavaScript:
// The random number generator
function getRndInteger(type, min, max) {
    if (type == "whole") {
        return Math.floor(Math.random() * (max - min + 1) ) + min;
    } else if (type == "decimal") {
        return (Math.random() * (max - min + 1) ) + min;
    }
}

// The JavaScript to the button
function clickFish() {
    var ncRandLoc = getRndInteger("whole", 20, 80);
    const node = document.getElementById("spinFish");
    const clone = node.cloneNode(true);
    clone.style.left = String(ncRandLoc) + "%";
    clone.style.display = "inline";
    document.body.appendChild(clone);
}

Fishy Boii image:
Fishy Boii.png


Screenshot of the problem:
Screenshot 2022-02-17 12.29.02.png

The problem only happens if you click the button fast, if you click it slowly then it doesn't really happen as badly as clicking it fast.
 
Ad

Advertisements

Ad

Advertisements

Joined
Mar 11, 2022
Messages
82
Reaction score
8
Stop using const within a function.
Or try it like this
Code:
const node = document.getElementById("spinFish"); //const is a global constance. Can't be changed nor overwritten as you do in your previous function. So of course it fails if you click to fast. Check your console.

function clickFish() {
    var ncRandLoc = getRndInteger("whole", 20, 80);
    var clone = node.cloneNode(true); //var instead of const. Even let should'nt be used here
    clone.style.left = String(ncRandLoc) + "%";
    clone.style.display = "inline";
    document.body.appendChild(clone);
}
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top