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

منتشر شده در تاریخ : 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:wght@200;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

آموزش ساخت اسلایدر با HTML و CSS (عکس | بلاگ)

آموزش ساخت ساعت دیجیتال در جاوا اسکریپت

نمایش و پنهان کردن رمز عبور در جاوا اسکریپت

ساخت منوی بازشو در HTML CSS و جاوا اسکریپت

مینی وب اپلیکیشن پسورد ساز با جاوا اسکریپت

ساخت دکمه سوئیچ یا Toggle Button در جاوا اسکریپت

ساخت باکس جستجو یا سرچ بار در جاوا اسکریپت