비전공자 개발일기

Animated Submit BUTTON 본문

Javascript

Animated Submit BUTTON

HiroDaegu 2022. 5. 10. 00:59
728x90
SMALL

 

<!DOCTYPE html>
<html lang="ko">
<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>ANIMATED SUBMIT BUTTON</title>
  <link rel="stylesheet" href="style.css">
  <script defer src="main.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
  <main>
    <div class="button">
      <div class="text">SUBMIT</div>
      <div class="progress-bar"></div>
      <svg x="0px" y="0px" viewBox="0 0 25 30" style="enable-background:new 0 0 25 30;">
        <path class="check st0" d="M2, 19.2C5.9, 23.6, 9.4, 28, 9.4, 28L23, 2"></path>
      </svg>
    </div>
  </main>
</body>
</html>
body {
  background: #1d1f20;
}

main {
  width: 100vw;
  height: 100vh;
}

.button {
  background: #2b2d2f;
  width: 200px;
  height: 80px;
  text-align: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: 0 auto;
  cursor: pointer;
  border-radius: 4px;
}

.text {
  font: bold 1.25rem/1 poppins;
  color: #71dfbe;
  position: absolute;
  top: 50%;
  transform: translateY(-52%);
  left: 0;
  right: 0;
}

.progress-bar {
  position: absolute;
  width: 0;
  height: 10px;
  top: 50%;
  right: 0;
  left: 50%;
  border-radius: 200px;
  transform: translateX(-50%) translateY(-50%);
  background: #505357;
}

svg {
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  right: 0;
  transform: translateX(-50%) translateY(-50%);
}

.check {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  opacity: 0;
  stroke-linecap: round;
  stroke-linejoin: round;
}
var basicTimeline = anime.timeline({
  autoplay: false
});

var pathEls = document.querySelector(".check");
var btn = document.querySelector(".button");
var text = document.querySelector(".text");

for(var i = 0; i < pathEls.length ; i++) {
  var pathEl = pathEls[i];
  var offset = anime.setDashoffset(pathEl);
  pathEl.setAttribute("stroke-dashoffset", offset);
}

btn.onclick = function() {
  basicTimeline.play();
  console.log("clicked");
}

text.onclick = function() {
  basicTimeline.play();
}

basicTimeline
  .add({
    targets: ".text",
    duration: 1,
    opacity: "0"
  })
  .add({
    targets: ".button",
    duration: 1300,
    width: 300,
    height: 10,
    backgroudColor: "#2B2D2F",
    border: "0",
    borderRadius: 100
  })
  .add({
    targets: '.progress-bar',
    duration: 2000,
    width: 300,
    easing: "linear"
  })
  .add({
    targets: ".button",
    width: 0,
    duration: 1
  })
  .add({
    targets: ".progress-bar",
    width: 80,
    height: 80,
    delay: 500,
    duration: 750,
    borderRadius: 80,
    backgroundColor: "#71DFBE"
  })
  .add({
    targets: ".check",
    duration: 10,
    opacity: "1"
  })
  .add({
    targets: pathEl,
    strokeDashoffset: [offset, 0],
    duration: 200,
    easing: "easeInOutSine"
  })
728x90
LIST

'Javascript' 카테고리의 다른 글

3D Gallery  (0) 2022.05.14
Draggable DIV  (0) 2022.05.12
Lock Animation  (0) 2022.05.05
Alarm Application  (0) 2022.05.02
3D Card  (0) 2022.04.27
'Javascript' Related Articles more