ساخت انیمیشن کلیک روی دکمه در جاوا اسکریپت l وبکیما

منتشر شده در تاریخ : 24, مرداد, 1401

در این آموزش ویدیویی از سری آموزش‌های مینی پروژه جاوا اسکریپت و مینی پروژه های HTML و CSS ساخت انیمیشن کلیک روی دکمه یا Button Ripple Animation را توسط زبان برنامه نویسی جاوا اسکریپت و البته HTML و CSS طراحی کنیم که از این طرح می‌توانید در پروژه های خود به سادگی استفاده کنید، پس با این آموزش جذاب همراه آکادمی وبکیما باشید.

راهنمای مطالعه:

طراحی انیمیشن کلیک روی دکمه در جاوا اسکریپت

در این آموزش ساخت انیمیشن کلیک روی دکمه در جاوا اسکریپت را خواهیم داشت، توجه داشته باشید که شما می‌توانید فقط با کمی خلاقیت از این آموزش در حالت هاور هم استفاده کنید، یا می‌توانید حالت انیمیشن را تغییر داده و یک مینی کتابخانه انیمیشن برای دکمه ها برای خود بسازید و در پروژه های خود از آن استفاده کنید.

کدهای HTML پروژه

در زیر می‌توانید کدهای html مربوط به مینی پروژه انیمیشن کلیک روی دکمه در جاوا اسکریپت را مشاهده کنید.

<!DOCTYPE html>
<!-- Created by Navid Dev -->
<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>Navid Dev - Button Animation</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="buttons">
      <a href="#" class="button">Button</a>
      <a href="#" class="button two">Button</a>
    </div>

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

کدهای CSS پروژه

در زیر می‌توانید کدهای CSS مربوط به مینی پروژه انیمیشن کلیک روی دکمه در جاوا اسکریپت را مشاهده کنید.

/* Google Font Link */
@import url("https://fonts.googleapis.com/css2?family=Poppins:[email protected];300;400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #350048;
  font-family: "Poppins", sans-serif;
}
.button {
  position: relative;
  color: #fff;
  display: inline-block;
  padding: 12px 38px;
  background: linear-gradient(90deg, #6616d0, #ac34e7);
  border-radius: 45px;
  text-decoration: none;
  overflow: hidden;
  margin: 10px;
  box-shadow: 3px 5px rgba(0, 0, 0, 0.1);
  font-size: 30px;
  font-weight: 300;
}
.button.two {
  background: linear-gradient(90deg, #025ce3, #4e94fd);
}
.button .overlay {
  position: absolute;
  background: #fff;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  animation: blink 0.5s linear;
}
@keyframes blink {
  0% {
    height: 0;
    width: 0;
    opacity: 0.3;
  }
  100% {
    height: 400px;
    width: 400px;
    opacity: 0;
  }
}

کدهای جاوا اسکریپت پروژه

در زیر می‌توانید کدهای جاوا اسکریپت مربوط به مینی پروژه انیمیشن کلیک روی دکمه در جاوا اسکریپت را مشاهده کنید.

let buttons = document.querySelectorAll(".button");

for (let i = 0; i < buttons.length; i++) {
  //   console.log(buttons[i]);
  buttons[i].addEventListener("click", (e) => {
    // Ignor refreshing the page
    e.preventDefault();

    // Create a span tag
    let overlay = document.createElement("span");
    // Add overlay class to this span
    overlay.classList.add("overlay");
    // add this span to the button
    e.target.appendChild(overlay);

    // console.log(e.clientX);
    let xValue = e.clientX - e.target.offsetLeft;
    let yValue = e.clientY - e.target.offsetTop;

    overlay.style.left = xValue + "px";
    overlay.style.top = yValue + "px";

    // Remove the span after its done!
    buttons[i].addEventListener("animationend", (e) => {
      overlay.remove();
    });
  });
}

جمع بندی

در انتها امیدواریم که آموزش ساخت انیمیشن کلیک روی دکمه یا Button Ripple Animation در HTML CSS و جاوا اسکریپت را یاد گرفته باشید، اگر سوالی در رابطه با این آموزش دارید در انتهای همین جلسه و در بخش کامنت ها با ما در ارتباط باشید.

5/5 - (2 امتیاز)

ساخت انیمیشن کلیک روی دکمه در جاوا اسکریپت

طراحی انیمیشن کلیک روی دکمه در جاوا اسکریپت

کدهای HTML پروژه

کدهای CSS پروژه

کدهای جاوا اسکریپت پروژه

جمع بندی

نبی عبدی

دیدگاهتان را بنویسید لغو پاسخ