پیاده سازی دوبار ضربه زدن (هنگام لایک) در اینستاگرام با جاوااسکریپت

در این مقاله قصد داریم دوبار ضربه زدن معروف اینستاگرام را پیاده سازی کنیم تا پست‌ها را لایک کنیم. جای تعجب دارد که ما فقط به 12 خط کد جاوااسکریپت نیاز داریم!

برای این کار، یک کنترل کننده دوبار کلیک به تصویر خود متصل خواهیم کرد که در آن انیمیشن قلب به علاوه شمارنده زیر پست نشان داده شده است.

ساختار HTML

<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <symbol id="icon-heart" viewBox="0 0 32 32">
      <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
    </symbol>
  </defs>
</svg>

<div class="post">
  <svg class="icon icon-heart">
    <use xlink:href="#icon-heart"></use>
  </svg>
  <img src="https://instagram.fcpt4-1.fna.fbcdn.net/v/t51.2885-15/sh0.08/e35/s640x640/105986995_880679399008682_4786248831928918923_n.jpg?_nc_ht=instagram.fcpt4-1.fna.fbcdn.net&_nc_cat=102&_nc_ohc=ZI2jfIEB-tUAX8MMD58&oh=4cc88009309dbc5b223b8334408ac213&oe=5F78F3A2" />
  <p><span>0</span> likes</p>
</div>

در HTML، ما باید تصویر را با استفاده از SVG بسازیم. سپس div را با SVG داخل آن ایجاد می‌کنیم. در زیر آن نیز پست واقعی اینستاگرام را نمایش می‌دهیم و در نهایت تعداد لایک‌هایمان را داریم.

همانطور که مشاهده کردید، ما از عناصر singer استفاده می‌کنیم. بنابراین زحمت اضافه کردن کلاس برای این مثال را نداریم.

ساختار CSS

.post {
  margin: auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.post img {
  width: 400px;
  cursor: pointer;
}
.post .icon {
  position: absolute;
  display: inline-block;
  width: 128px;
  opacity: 0;
  fill: red;
}
.post .icon.like {
  animation: 2s like-heart-animation ease-in-out forwards;
}
.post p {
  align-self: baseline;
  margin-top: 10px;
}

در اینجا از Flex برای قرار دادن پست استفاده می‌کنیم. بعد آیکون (قلب) را absolute می‌کنیم و به آن opacity صفر می‌دهیم، اما در حالت بارگذاری قابل مشاهده نیست.

سپس می‌گوییم اگر این آیکون کلاس like گرفت، انیمیشن نمایش قلب را اضافه کن.

این انیمیشن دقیقا به همان شکلی است که اینستاگرام آن را نمایش می‌دهد. آن‌ها آن را استایل دهی می‌کنند و در انتها مقیاس می‌دهند تا ظاهر جذابی به آن بدهند.

@keyframes like-heart-animation {
  0%,
  to {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  15% {
    opacity: 0.9;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  30% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }
  45%,
  80% {
    opacity: 0.9;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

لایک اینستاگرام در جاوااسکریپت

برای اینکه افکت واقعی ما اضافه شود، باید کلاس مشابه را به آیکون svg خود بدهیم.

const img = document.querySelector("img");
const icon = document.querySelector(".icon");
const countEl = document.querySelector("span");
let count = 0;
img.addEventListener("dblclick", () => {
  count++;
  icon.classList.add("like");
  countEl.innerHTML = count;
  setTimeout(() => {
    icon.classList.remove("like");
  }, 1200);
});

ما یک شنونده رویداد به نام dblclick (دوبار کلیک) اضافه می‌کنیم. اگر چنین اتفاقی بیفتد، به شمارنده خود می‌گوییم یکی افزایش یابد. سپس کلاس like را به آیکون خود اضافه می‌کنیم و تعداد لایک‌ها را به روز می‌کنیم. بعد از 1200 میلی ثانیه، دوباره کلاس مشابه را حذف می‌کنیم.

اکنون مانند اینستاگرام این افکت را داریم.

امیدواریم این آموزش مورد پسندتان واقع شود. در صورت داشتن هرگونه سوال یا نظری، آن را در بخش زیر با ما در میان بگذارید.

منبع