Animasi gambar Besar Bergerak berganti setiap hari OTOMATIS

Di halaman ini diberikan contoh animasi gambar besar yang bergerak bergantian otomatis. Kamu bisa copas kode yang ada di halaman ini, untuk kamu pasang di blog kamu. Jika kesulitan copasnya, silakan bertanya via komentar.

🍀

🍀

    
<style>
@keyframes mov{0%{transform:translateX(0) translateY(0) rotate(0);opacity:0.03;}
  25%{transform:translateX(250px) translateY(200px) rotate(90deg);opacity:0.2;}
  50%{transform:translateX(0) translateY(350px) rotate(180deg);opacity:0.03;}
  75%{transform:translateX(-300px) translateY(250px) rotate(270deg);opacity:0.2;}
  100%{transform:translateX(0) translateY(0) rotate(0deg);opacity:0.03;}}
  .el{animation-name:mov;animation-duration:5s;animation-timing-function:ease-in-out;animation-iteration-count:2;animation-fill-mode:forwards}
  .el2{animation-name:mov2;animation-duration:8s;animation-timing-function:ease-in-out;animation-iteration-count:2;animation-fill-mode:forwards}
@keyframes mov2{0%{transform:translateX(0) translateY(0) rotate(0);opacity:0.03;}
25%{transform:translateX(250px) translateY(250%) rotate(90deg);opacity:0.2;}
50%{transform:translateX(0) translateY(500%) rotate(270deg);opacity:0.01;}
75%{transform:translateX(-250%) translateY(250%) rotate(360deg);opacity:0.3;}
100%{transform:translateX(0) translateY(0) rotate(0deg);opacity:0.03;}}
</style>

<div style="height: 1px; width: 100vw;"><div class="el" id="ka" style="font-size: 30em;">🍀</div></div>
<div><div class="el2" id="ka2" style="font-size: 25em;">🍀</div></div>

<script>
const kk3 = ["🪐", "💦", "💗", "💖", "💝", "💞", "💙", "🍒", "💎", "🎀", "📀", "🔍", "💫", "🌱", "🏠", "🌳", "🔎", "🏡", "🌷", "🌸", "💡", "🌺", "🌻", "🌼", "🌏", "🌿", "🍀", "🍁", "🍂", "🍃", "🐥", "🐓", "🔑", "📶", "🏆", "🌌", "🔆", "🐤"];
  
  const da = new Date().getDate();
  document.getElementById("ka").textContent = kk3[da];
  document.getElementById("ka2").textContent = kk3[da + 2];
</script>
    

Kode tersebut merupakan kode HTML, CSS, dan JavaScript yang menghasilkan animasi pada dua elemen div berisi karakter emoji bunga 🍀.

CSS pada kode tersebut menentukan animasi menggunakan @keyframes yang diberi nama "mov" dan "mov2". Animasi tersebut berisi transformasi elemen div dengan properti translateX, translateY, dan rotate, serta pengaturan opasitas elemen pada waktu tertentu dalam animasi. Setiap animasi berlangsung selama beberapa detik dengan dua kali pengulangan.

Elemen div pada kode tersebut diberi kelas "el" dan "el2" serta ID "ka" dan "ka2". Keduanya berisi karakter emoji bunga 🍀 dengan ukuran font yang berbeda.

JavaScript pada kode tersebut menentukan karakter emoji yang ditampilkan pada elemen div dengan ID "ka" dan "ka2" berdasarkan tanggal saat ini (diambil dengan menggunakan objek Date). Karakter emoji ditentukan dari array kk3 yang berisi karakter-karakter emoji tertentu. Karakter emoji pada elemen div "ka" ditentukan dari indeks array yang sama dengan tanggal hari ini, sementara karakter emoji pada elemen div "ka2" ditentukan dari indeks array yang diambil 2 hari setelah tanggal hari ini.