/**/

Read     Membuat Website Lebih Menarik Dengan Animasi Emoji Bergerak

Membuat Website Lebih Menarik Dengan Animasi Emoji Bergerak

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?

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!

Top