• 0

Javascript ile Instagram gibi çift tıklamada beğenme nasıl yapılır?

2 ay önce , Okuma süresi 2 dakika.

Bu yazımızda Instagram'ın kullandığı görselleri çift dokunarak veya tıklayarak beğenme olayını yapacağız. Javascript, CSS, ve tabikide HTML yardımıyla...

Javascript ile çok kısa ve basit bir kod parçacığı ile bu işi yapmak mümkün.

Bu efekt için, bir çift tıklama işleyicisini resmimize, kalp animasyonunu ve yazının altındaki sayacı gösterecek şekilde bağlayacağız.

Bittiğinde şöyle görünecek; 

Hazırsak başlayalım; 

Öncelikle HTML sayfamızı bir oluşturalım; 

<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'imize gelince, bizi SVG sprite'larımızdan yapıyoruz .
Ardından, içinde ocak SVG bulunan post div'ımızı oluşturuyoruz.
Bunun altında gerçek instagram gönderisini oluşturuyoruz.
Ve son olarak beğeni sayımız var.

Gördüğünüz gibi, şarkıcı öğeleri kullanıyoruz, bu nedenle bu örnek için sınıflar eklemeye zahmet etmedim.

Şimdi CSS dosyamızı hazırlayalım; 

.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;
}

Gönderiyi ortalamak için Flex'i kullanıyoruz .
Ardından, simgeyi (kalbi) mutlak yaparız ve ona 0 opaklık veririz, böylece yükte görünmez.

Sonra bu simgenin sınıfa likeanimasyon ekleyip eklemediğini söyleriz like-heart-animation.

Bu animasyon şuna benziyor ve Instagram'ın yaptığı gibi tam olarak bir animasyon.
Bir sıçrama efekti vermek için ölçeklendiriyorlar ve sonuna kadar biraz küçültüyorlar.

@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);
  }
}

 

JavaScript Kısmına Geçelim; 
Gerçek efektimizin yer eklemesi için, likesınıfı simge svg'imize eklememiz gerekir.

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(Çift tıklama) adında bir olay dinleyicisi ekliyoruz .
Bu olursa, sayacımıza bir artırmasını söyleriz.
Ardından simgemize beğenme sınıfını ekliyor ve beğeni sayısını güncelliyoruz.
1200 milisaniyeden sonra tekrar benzer sınıfı kaldırıyoruz.

Bu kadar! Artık Codepen'de aşağıdaki Instagram beğenme etkisine sahibiz:



#javascript #html #css