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;
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.
JavaScript Kısmına Geçelim;
Gerçek efektimizin yer eklemesi için, likesınıfı simge svg'imize eklememiz gerekir.
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: