Emoji ile Etkileşimli Reaksiyon Oluşturma

Teknokodi
teknokodi emoji reaksiyon

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. 

				
					<div class="emoji-container"></div>

<div class="emoji-list">
  <ul>
    <li>
      <button aria-label="Heart emoji">
        💖
      </button>
    </li>
    <li>
      <button aria-label="Thumbs up emoji">
        👍
      </button>
    </li>
    <li>
      <button aria-label="Party popper emoji">
        🎉
      </button>
    </li>
    <li>
      <button aria-label="Laughing emoji">
        😂
      </button>
    </li>
    <!-- Buraya dilediğiniz kadar emojiyi yerleştirebilirsiniz -->
  </ul>
</div>

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

Twitter Linkedin Instagram Google-play

Eğitimin, Eğlencenin ve Haberin Sitesi TEKNOKODİ

Okunma Sayısı 56

İlgili Yazılar