Trik Kode Kecil | Mata Emoji yang Menatap Kamu!

Code Sederhana Tapi Keren

Hai 😊 Teman! Kali ini aku mau berbagi code sederhana yang bikin tampilan website jadi lebih seru: emoji yang matanya bisa mengikuti kursor kamu! Lucu banget kan? Kalau kamu tertarik, bisa langsung copy-paste source code-nya di bawah. Tapi peringatan: ini untuk seru-seruan ya, jadi kalau kamu sudah jago koding, lebih seru bikin sendiri! 😁

Kode HTML dan CSS untuk Struktur dan Tampilan

Di sini, aku akan jelaskan bagian utama dari kode ini. HTML Struktur:

<div class="kepala">
  <div class="containersss">
    <div class="mata">
      <div class="pupil"></div>
    </div>
    <div class="mata">
      <div class="pupil"></div>
    </div>
  </div>
  <div class="mulut"></div>
</div>

<div class="kepala"> - Ini adalah elemen utama yang berbentuk lingkaran kuning. Di dalamnya, kita punya elemen untuk mata dan mulut.
.mata dan .pupil - Bagian mata diatur supaya bentuknya bulat dengan border-radius, dan bagian pupil akan bergerak mengikuti kursor nanti.
.mulut - Elemen ini untuk mulut emoji, yang digambar sebagai setengah lingkaran.

CSS untuk Tampilan

.kepala {
  width: 50px;
  height: 50px;
  background-color: #ffeb3b;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid black;
}

.kepala - Lingkaran kuning ini diatur lebarnya 50px, dengan background-color: #ffeb3b; dan border-radius: 50%; untuk membuat bentuk wajah emoji. box-shadow dan border bikin emoji lebih terlihat jelas.
.mata - Mata dibuat bulat kecil dengan width dan height 13px. border: 2px solid #333; bikin mata lebih berkarakter, dan overflow: hidden; mencegah pupil keluar dari lingkaran mata.
.pupil - Pupil dibuat dengan ukuran lebih kecil (8px) dan memiliki transition: transform 0.1s ease-out; untuk gerakan halus saat mengikuti kursor.
.mulut - Dibuat dengan bentuk setengah lingkaran merah di bagian bawah emoji.

JavaScript untuk Gerakan Pupil

Bagian JavaScript ini yang bikin emoji jadi interaktif, karena pupil pada mata emoji akan mengikuti posisi kursor.

document.addEventListener('mousemove', (e) => {
  const mataList = document.querySelectorAll('.mata');

  mataList.forEach(mata => {
    const pupil = mata.querySelector('.pupil');
    const mataRect = mata.getBoundingClientRect();
    const mataX = mataRect.left + mataRect.width / 2;
    const mataY = mataRect.top + mataRect.height / 2;
    const angle = Math.atan2(e.clientY - mataY, e.clientX - mataX);

    const jarak = 5;
    const pupilX = Math.cos(angle) * jarak;
    const pupilY = Math.sin(angle) * jarak;

    pupil.style.transform = `translate(${pupilX}px, ${pupilY}px)`;
  });
});

Penjelasan JavaScript:

1. Event Listener:

document.addEventListener('mousemove', ...) - Kode ini mendeteksi posisi kursor saat bergerak di layar.

2. Menghitung Posisi Mata:

const mataRect = mata.getBoundingClientRect(); - Mengambil posisi tiap mata di layar. const mataX dan mataY menghitung titik tengah dari tiap mata.

3. Menghitung Arah Pupil:

const angle = Math.atan2(...) - Menghitung sudut (angle) antara kursor dan titik tengah mata. const pupilX dan pupilY menghitung posisi pupil berdasarkan sudut dan jarak (const jarak = 5).

4. Gerakkan Pupil:

pupil.style.transform = translate(${pupilX}px, ${pupilY}px);

Menyusun pergerakan pupil agar mengikuti arah kursor, dengan jarak maksimum 5px dari tengah mata.

Full Code Here

<style>
.kepala {
  width: 50px;
  height: 50px;
  background-color: #ffeb3b;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid black;
}

.containersss {
  display: flex;
  gap: 4px;
}

.mata {
  width: 13px;
  height: 13px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border: 2px solid #333;
  overflow: hidden;
}

.pupil {
  width: 8px;
  height: 8px;
  background: #333;
  border-radius: 50%;
  position: absolute;
  transition: transform 0.1s ease-out;
}

.mulut {
  width: 20px;
  height: 10px;
  background-color: #f44336;
  border-radius: 0 0 50px 50px;
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
}
</style>

</head>
<body>
  <div class="kepala">
    <div class="containersss">
      <div class="mata">
        <div class="pupil"></div>
      </div>
      <div class="mata">
        <div class="pupil"></div>
      </div>
    </div>
    <div class="mulut"></div>
  </div>

<script>
document.addEventListener('mousemove', (e) => {
  const mataList = document.querySelectorAll('.mata');

  mataList.forEach(mata => {
    const pupil = mata.querySelector('.pupil');

    const mataRect = mata.getBoundingClientRect();
    const mataX = mataRect.left + mataRect.width / 2;
    const mataY = mataRect.top + mataRect.height / 2;

    const angle = Math.atan2(e.clientY - mataY, e.clientX - mataX);

    const jarak = 5;
    const pupilX = Math.cos(angle) * jarak;
    const pupilY = Math.sin(angle) * jarak;

    pupil.style.transform = `translate(${pupilX}px, ${pupilY}px)`;
  });
});
</script>
</body>

Siapa Saya? (Spoiler: Bukan Superhero) 🦸‍♂️

Hai, saya adalah seorang pembelajar web yang selalu merasa seperti seorang ilmuwan gila! Saya nggak bisa berhenti mencatat hal-hal keren dan random yang saya pelajari setiap hari. Website ini adalah tempat saya menulis catatan belajar yang sepertinya hanya saya yang paham, tapi tetap saja saya harap kalian bisa menemukan sesuatu yang bermanfaat di sini. Di setiap sudut situs ini, kalian akan menemukan berbagai macam eksperimen—dari coding yang terasa seperti sihir, sampai penemuan aneh yang muncul dari inspirasi saat tengah malam, yang mungkin hanya saya yang mengerti. Bisa dibilang, ini adalah dunia saya, tempat saya menggabungkan kreativitas, kegilaan, dan sedikit logika yang mungkin kadang hilang begitu saja 😆.

Apa Tujuan Website Ini? (Selain Menjadi Tempat Membuang Waktu) 🕒

Tujuan utama website ini adalah untuk merekam perjalanan belajar saya yang penuh warna—tapi dengan gaya yang sangat bebas! Saya suka kebebasan dalam segala hal, termasuk dalam mencatat dan belajar. Jadi, jangan kaget kalau tiba-tiba kalian menemukan sesuatu yang super terstruktur dan rapi, lalu selanjutnya malah menemukan catatan yang seolah-olah ditulis oleh seorang alien. Website ini adalah tempat saya melepaskan semua ide gila yang tiba-tiba muncul, meski terkadang bisa berubah drastis dari satu topik ke topik lainnya. Ini adalah eksperimen berkelanjutan tentang apa yang bisa saya pelajari, apa yang menarik minat saya, dan bagaimana saya bisa memecah rutinitas sehari-hari. Saya tidak ingin website ini hanya menjadi tempat belajar yang biasa, tapi juga tempat saya untuk berkreasi dan menemukan hal baru setiap hari! Jadi, jika kalian merasa kontennya nggak sesuai dengan yang kalian harapkan, yaa, itu mungkin karena saya baru saja mendapat ide baru yang lebih menyenangkan 🌟.

Kenapa Konten Bisa Berubah-ubah? (Karena Saya Mood-nya Cepat Berganti) 😜

Karena website ini adalah dunia milik saya, saya merasa bebas untuk mengubah-ubah isinya sesuai dengan apa yang sedang saya pelajari atau minati pada saat itu. Kadang saya bisa jadi sangat serius dan memikirkan konsep pengembangan web yang sangat mendalam—lalu tiba-tiba berubah jadi cerita tentang eksperimen aneh yang tidak ada hubungannya dengan coding. Jadi, jika kalian menemui halaman yang terasa super teknis di satu waktu dan kemudian menemukan halaman penuh dengan hal-hal random yang menggelikan pada waktu lain, itu karena saya, pembelajar yang mood-nya cepat berubah!. Website ini tidak mengikuti aturan baku atau standar lainnya—itu adalah catatan pribadi saya yang terus berkembang, dan jika saya merasa ingin mengubah desain atau menulis tentang hal-hal yang tidak terduga, ya saya akan melakukannya tanpa ragu! Mungkin nanti saya akan menulis tentang hal-hal seperti bagaimana memprogram robot untuk memasak mie instan, siapa yang tahu? Yang pasti, website ini adalah tempat yang penuh kejutan!