Membuat Website Lebih Menarik Dengan Animasi Emoji Bergerak

05 Nov, 2023

HTML

Hirzi Widyan Putra

Kali ini saya mau ngasih tau aja nih biar web kita lebih menarik, kita bisa nambahin emoji bergerak loh! Gak cuma nampilin emoji kayak digoogle keyboard biasa tapi ini animasi emojinya bergerak jadi lebih menarik kalau pakai ini hehe tapi ini perlu internet yaa, kalau gak mau pakai internet, bisa download jadi GIF

Untuk yang mau liat button nya gimana bisa di Tiktok Gilacoding :https://www.tiktok.com/@gilacoding?lang=id-ID

atau diyoutube : YT Gilacoding

Apa yang perlu disiapin?

Koneksi internet, untuk menampilkan emoji
Link Website Emojinya : https://googlefonts.github.io/noto-emoji-animation/

Ini contohnya index.html :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>@gilacoding</title>
  <style type="text/css">
   
.center-box{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  height: 320px;
  width: 520px;
  color: #000;
  border-radius: 20px;
  box-shadow: 0px 0px 80px 0px rgba(0,0,0,0.15);
  font-family: "Segoe UI";
  text-align: center;
  vertical-align: middle;
  padding-top: 20px;
  box-sizing: border-box;
}
.emoji {
  display: inline-block; 
}
.emoji img {
  width: 50px;
  height: 50px;
}

  </style>
</head>
<body>
  <div class="center-box">
  <h1>Mempercantik Web dengan Animasi Emoji Bergerak</h1>
  <div class="emoji">
    <picture>
      <source srcset="https://fonts.gstatic.com/s/e/notoemoji/latest/1f62d/512.webp" type="image/webp">
      <img src="https://fonts.gstatic.com/s/e/notoemoji/latest/1f62d/512.gif" alt="????" width="32" height="32">
    </picture>
  </div>
  <div class="emoji">
    <picture>
  <source srcset="https://fonts.gstatic.com/s/e/notoemoji/latest/1f970/512.webp" type="image/webp">
  <img src="https://fonts.gstatic.com/s/e/notoemoji/latest/1f970/512.gif" alt="????" width="32" height="32">
</picture>
  </div>
  <div class="emoji">
    <picture>
  <source srcset="https://fonts.gstatic.com/s/e/notoemoji/latest/1f92a/512.webp" type="image/webp">
  <img src="https://fonts.gstatic.com/s/e/notoemoji/latest/1f92a/512.gif" alt="????" width="32" height="32">
</picture>
  </div>
  <div class="emoji">
    <picture>
  <source srcset="https://fonts.gstatic.com/s/e/notoemoji/latest/1f483_1f3fc/512.webp" type="image/webp">
  <img src="https://fonts.gstatic.com/s/e/notoemoji/latest/1f483_1f3fc/512.gif" alt="????" width="32" height="32">
</picture>
  </div>
  <div class="emoji">
    <picture>
  <source srcset="https://fonts.gstatic.com/s/e/notoemoji/latest/2705/512.webp" type="image/webp">
  <img src="https://fonts.gstatic.com/s/e/notoemoji/latest/2705/512.gif" alt="?" width="32" height="32">
</picture>
  </div>
  <div class="emoji">
    <picture>
  <source srcset="https://fonts.gstatic.com/s/e/notoemoji/latest/1f3c1/512.webp" type="image/webp">
  <img src="https://fonts.gstatic.com/s/e/notoemoji/latest/1f3c1/512.gif" alt="????" width="32" height="32">
</picture>
  </div>
    <p><a href="@youtube">@gilacoding</a></p>
    </div>
</body>
</html>

Note :

Untuk mengatur besar/kecil emoji nya bisa menggunakan width/height langsung diimg
atau bisa pakai css seperti dicontoh saya ini ya sob
kalau mau offline tanpa internet, bisa download GIF lalu panggil gif menggunakan img src dan lokasikan ke gif yg kamu download

Terima kasih, tunggu konten menarik selanjutnya ya!

Read Membuat Website Lebih Menarik Dengan Animasi Emoji Bergerak

Membuat Website Lebih Menarik Dengan Animasi Emoji Bergerak