I'm looking to get the button (currently centered) to animate to the top left onClick, I already have a function connected to this element

I want a button positioned in the center to animate to either the top of the page or the top left. I already have one function connected to this element that removes a solid black page and enters the main site. Is it possible to have this element run two functions; one being the translate animation and two being the removal of a solid background color.

<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>Sean Marc Howe</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="overlay"></div>
    <div id="intro"; class="intro"></div>
    <div id="buttonWrapper1" class="buttonWrapper"><button class="introBtn" onclick="javascript:one(); two();"><img></button></div>

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




.intro {
  position: fixed;
  z-index: 2;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0);
}
.buttonWrapper {
  z-index: 10;
}
.buttonWrapper:active {
  transform-origin: top left;
}
.introBtn {
  /* position: absolute; */
  background-color: transparent;
  outline: none;
  top: 40%;
  right: 645px;
  left: 645px;
  z-index: 5;
  border: 2px solid white;
  border-radius: 50%;
  padding: 7px;
}
/* .introBtn:active {
  animation-name: slide;
  animation-duration: 1s;
  animation-fill-mode: forwards;
} */

.introBtn:hover {
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 50%;
  padding: 7px;
  z-index: 2;
}

body {
  background-image: url("/images/pexels-kevin-ku-577585.jpg");
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
}

.overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.65);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

@keyframes slide {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(0px, -280px);
  }
}


var bool = true;
function one() { 
    
    (bool) ? document.getElementById("intro").style.background = "rgb(0, 0, 0)" :  document.getElementById("intro").style.background = "rgba(0, 0, 0, 0)";
    bool = !bool;

// // function two(){
//     document.getElementById('intro').className ='classname';
//   }

}

12 thoughts on “I'm looking to get the button (currently centered) to animate to the top left onClick, I already have a function connected to this element”

  1. It’s possible you could use javascript as you did before to add a css class and then have it change using transition. Then your css will figure out what to do for you, and animate your object.

    I’m using toggle in my example but you can use add and remove if you only want it to fire once, and not be toggleable.

    var bool = true;
    
    function fadeOut() {
        document.getElementById("intro").classList.toggle("active");
    }
    
    function moveButton() {
        document.getElementById("buttonWrapper1").classList.toggle("active");
    }
    .intro {
      position: fixed;
      z-index: 2;
      left: 0%;
      top: 0%;
      width: 100%;
      height: 100%;
      transition: 2s ease;
    }
    .intro.active {
      background: black;
    }
    
    .buttonWrapper {
      z-index: 10;
      position: absolute;
      top: 10px;
      left: 50%;
      display: flex;
      justify-content: center;
      /* Set transition to animate */
      transition: 3s ease;
    }
    
    .buttonWrapper.active {
      left: 10px;
    }
    
    .buttonWrapper.active .introBtn {
      border: 2px solid black;
    }
    
    .introBtn {
      background-color: transparent;
      outline: none;
      top: 40%;
      right: 645px;
      left: 645px;
      z-index: 5;
      border: 2px solid white;
      border-radius: 50%;
      padding: 7px;
    }
    .introBtn:hover {
      cursor: pointer;
    }
    <html lang="en">
    <body>
        <div class="overlay"></div>
        <div id="intro"; class="intro active"></div>
        <div id="buttonWrapper1" class="buttonWrapper"><button class="introBtn" onclick="javascript:fadeOut(); moveButton();"><img></button></div>
    
    </body>
    </html>
    Reply

Leave a Comment