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';
//   }

}

31 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”

Leave a Comment