Question 43919 in Html Question posted in
Some basic documentation can be found here.

(closed)My css variable won't function and overrides the other transformations – Html

I am making a simple html and javascript game where you can fly your stickfigure around the page. I implemented a rotating transformation, so if you press a key like the left arrow, it will rotate in that direction.

I tried to add a hovering animation, so it looks like he is constantly hovering, regardless if he is turning or just flying.

So, I made the rotating part a variable inside of the keyframes animation.

I currently only applied the hovering animation when you turn left. However when I turn left, neither the rotating or the hovering animation shows up(he is just moving in that direction). I am very sorry if the code is messy, I am still starting.

I want the character to rotate in the direction of the arrow keys when pressed (which is already implemented), but also constantly hover.

Home.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="/Style.css">
  
  
</head>
<body>
  <img  class= "jotaro" id="idleJotaro" src="static/image-removebg-preview__3_-removebg-preview.png">
  <script src="Home.js"></script>
</body>
</html>

Home.js(only the keypress events)

function moveJotaro(event){

    switch(event.key){
        case "ArrowDown":
            if(jotaro.style.transform == 'rotate(-90deg)'){
                jotaro.style.transform = 'rotate(-180deg)'
                jotaroY += 10;
                jotaro.style.top = jotaroY + "px"
                jotaro.src = "static/flyup.png"
            } else if(jotaro.style.transform == 'rotate(90deg)'){
                jotaro.style.transform = 'rotate(-180deg)'
                jotaroY += 10;
                jotaro.style.top = jotaroY + "px"
                jotaro.src = "static/flyup.png"
            }else{
                jotaro.style.transform = 'rotate(-180deg)'
                jotaroY += 10;
                jotaro.style.top = jotaroY + "px"
                jotaro.src = "static/flyup.png"
            }
            break;
        
        case "ArrowUp":
            if(jotaro.style.transform == 'rotate(270deg)'){
                jotaro.style.transform = 'rotate(360deg)'
                jotaroY -= 10;
                jotaro.style.top = jotaroY + 'px'
                jotaro.src = "static/flyup.png"
            } else if(jotaro.style.transform == 'rotate(-270deg)'){
                jotaro.style.transform = 'rotate(-360deg)'
                jotaroY -= 10;
                jotaro.style.top = jotaroY + 'px'
                jotaro.src = "static/flyup.png"
            }else{
                jotaro.style.transform = 'rotate(0deg)'
                jotaroY -= 10;
                jotaro.style.top = jotaroY + 'px'
                jotaro.src = "static/flyup.png"

            }
            break;
        
        case "ArrowRight":
            jotaro.classList.remove("anim")
            if(jotaro.style.transform === 'rotate(-180deg)'){
                jotaro.style.transform = 'rotate(-270deg)'
                jotaroX += 10;
                jotaro.style.left = jotaroX + 'px'
                jotaro.src = "static/flyup.png"
            } else if(jotaro.style.transform == 'rotate(0deg)'){
                jotaro.style.transform = 'rotate(90deg)'
                jotaroX += 10;
                jotaro.style.left = jotaroX + 'px'
                jotaro.src = "static/flyup.png"

            }else{
                jotaro.style.transform = 'rotate(90deg)'
                jotaroX += 10;
                jotaro.style.left = jotaroX + 'px'
                jotaro.src = "static/flyup.png"
            }
            break;

         case "ArrowLeft":
            if(jotaro.style.transform == 'rotate(270deg)') {
                jotaro.style.transform = 'rotate(90deg)'
                jotaroX -= 10;
                jotaro.style.left = jotaroX + 'px'
                jotaro.src = "static/flyup.png"
                jotaro.style.setProperty('--degrees', '90deg')
            } else if(jotaro.style.transform == 'rotate(-90deg)'){
                jotaroX -= 10;
                jotaro.style.left = jotaroX + 'px'
                jotaro.src = "static/flyup.png"
                
            }else if(jotaro.style.transform === 'rotate(-360deg)'){
                jotaro.style.transform = 'rotate(-90deg)'
                jotaroX -= 10;
                jotaro.style.left = jotaroX + 'px'
                jotaro.src = "static/flyup.png"
                jotaro.style.setProperty('--degrees', '-90deg')
            }else if(jotaro.style.transform == 'rotate(0deg)'){
                jotaro.style.transform = 'rotate(-90deg)'
                jotaroX -= 10;
                jotaro.style.left = jotaroX + 'px'
                jotaro.src = "static/flyup.png"
                jotaro.style.setProperty('--degrees', '-90deg')
            }else if(jotaro.style.transform == 'rotate(-180deg)'){
                jotaro.style.transform = 'rotate(-90deg)'
                jotaroX -= 10;
                jotaro.style.left = jotaroX + 'px'
                jotaro.src = "static/flyup.png"
                jotaro.style.setProperty('--degrees', '-90deg')
            }else{
                jotaro.style.transform == 'rotate(-270deg)'
                jotaroX -= 10;
                jotaro.style.left = jotaroX + 'px'
                jotaro.src = "static/flyup.png"
                jotaro.style.setProperty('--degrees', '-270deg')
                
            }
             break;
        
         default: 
             jotaro.src = "static/image-removebg-preview__3_-removebg-preview.png"
             break;

    }

}

Style.css:

.jotaro {
    position: relative;
    width: 300px;
    height: 400px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transition: 0.5s;
    animation: hover 1s linear infinite;
}


@keyframes hover {
    0%, 100% {
        transform: translateY(0) rotate(0deg); 
    }

    50% {
        transform: translateY(-5px) /*<-- hovering anim */rotate(var(--degrees), 0deg);/*<-- rotating towards key anim */
    }
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I realized that what I was achieve was not possible by he laws of javascript, so I added a keyup function so he will do this animation when he is idle. Thank you everyone for helping me with this!


  2. 0

    You should be using the CSS var function to use CSS variables (sometimes called, "custom CSS properties"):

    @keyframes hover {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-5px) rotate(var(--degrees), 0deg);
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search