Sosyal mesyanın da etkisi ile kullanıcılar içeriklere duygusal tepki vermeye başladı. Artık bir resim, video, blog yazısı yada başka birşeyde bile kullanıcılar sevip sevmediklerini emoji ile reaksiyon göstererek belli ediyor. Bu yazımızda bizlerde basit ama eğlenceli bir emoji ile tepki veren butonlar yapacağız.
HTML
İlk önce kuullanıcılara göstereceğimiz emojilerin görsellerini HTML ile hazırlıyoruz.
-
-
-
-
CSS
HTML ile hazırladığımız içeriği CSS ile ekranımıza yerleştireceğiz. Burada sayfanın en altına ve ortasına container ımızı yerleştireceğiz ki üst kısımda sanki bir içerik var ve ona reaksiyon gösteriyoruz gibi dursun 🙂
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
::selection {
background: transparent;
}
body {
background: #202124;
display: grid;
padding: 15px;
gap: 15px;
}
.emoji-container {
background: #2c2c2c;
border-radius: 10px;
height: calc(100dvh - 115px);
overflow: hidden;
position: relative;
}
.emoji-list {
background: #2c2c2c;
margin-inline: auto;
display: table;
border-radius: 50px;
padding: 10px;
}
.emoji-list ul {
display: flex;
}
.emoji-list ul li {
display: flex;
cursor: pointer;
margin-inline: 2.5px
}
.emoji-list ul li button {
font-size: 2em;
cursor: pointer;
padding: 2px;
border:none;
border-radius: 50%;
background-color: transparent;
outline-color: rgba(255,255,255,0.1);
line-height: 44px;
}
.emoji-list ul li button:focus-visible {
outline: 2px solid rgba(255,255,255,0.5);
background: rgba(255,255,255,0.05);
}
.emoji-animate {
font-size: 3em;
will-change: transform;
position: absolute;
}
CSS kısımlarını siz kendi projenize veya isteğinize göre değiştirebilirsiniz.
JS
Şimdi sıra geldi emoji ile reaksiyon olayına. Bir emojiye basınca tepki göstereceğimiz ve dilersek proje çalışır çalışmaz bir kaç emoji tepkisi ile kullanıcılara bu kısımdan tepki veerebileceklerini göstereceğimiz kısımları burada yapacağız.
class EmojiAnimate {
constructor() {
this.emojis = document.querySelectorAll(".emoji-list button");
this.container = document.querySelector(".emoji-container");
this.handleEmojiClick = this.handleEmojiClick.bind(this);
this.addEventListeners();
}
addEventListeners() {
this.emojis.forEach((emoji) =>
emoji.addEventListener("click", this.handleEmojiClick)
);
// belirli bir saniye sonra çalışacak emojiler
setTimeout(() => {
this.emojis[7].click();
}, 200);
setTimeout(() => {
this.emojis[1].click();
}, 1000);
}
handleEmojiClick(e) {
const emojiEl = document.createElement("div");
emojiEl.classList.add("emoji-animate");
const { innerHTML } = e.target;
emojiEl.innerHTML = innerHTML;
this.container.appendChild(emojiEl);
const { height, left } = e.target.getBoundingClientRect();
const { bottom, top, width } = this.container.getBoundingClientRect();
// animasyon
const animation = emojiEl.animate(
[
{
opacity: 1,
transform: `translate(${left}px, ${bottom}px)` },
{
opacity: 0,
transform: `translate(${width / 2}px, ${top - height}px)`,
},
],
{
duration: 2000,
easing: "cubic-bezier(.47,.48,.44,.86)",
}
);
// animasyon bitince kaldır
animation.onfinish = () => emojiEl.remove();
}
}
new EmojiAnimate();
İşge bu kadar basit. Tabi burada kullanıcıların hangi emoji ile ne kadar tepki gösgerdiklerini bilemiyoruz. Bunun için bir back-end programlama dili kullanarak bunu tutabilir ve kullanıcılara gösterebilirsiniz. Yada basitçe butonlara tıklanma oranını js ile gösterebilirsiniz.
Paylaş
Takip Et
Eğitimin, Eğlencenin ve Haberin Sitesi TEKNOKODİ