Dalam dunia web development, seringkali kita memerlukan fitur menarik seperti animasi untuk menampilkan nama acak bergantian sebagai pemenang dalam sebuah kontes atau acara tertentu. Dalam artikel ini, kita akan mempelajari cara membuat animasi kode JavaScript sederhana untuk mencapai tujuan tersebut. Dengan sedikit sentuhan JavaScript, Anda dapat menciptakan efek animasi yang menarik dan interaktif untuk memilih pemenang secara acak.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Undian Nama Acak</title>
<style>
body, html {
height: 100%;
margin: 0;
font-family: Arial, sans-serif;
}
.centered-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
background-color: #e6f7ff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
width: 300px; /* Lebar box statis 300px */
}
h1 {
color: #333;
font-size: 2em;
}
h3 {
color: #ff4757;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="centered-content">
<h3 id="countdown">Countdown: 10</h3>
<div id="name-display"><h1>Nama disini</h1></div>
</div>
<script>
const names = ["Nama1", "Nama2", "Nama3", "Nama4", "Nama5"];
let countdown = 9;
let countdownInterval;
let nameInterval;
function startCountdown() {
countdownInterval = setInterval(function() {
document.getElementById("countdown").textContent = "Countdown: " + countdown;
countdown--;
if (countdown < 0) {
clearInterval(countdownInterval);
document.getElementById("countdown").textContent = 'Nama Terpilih :';
}
}, 1000);
}
function startRandomNames() {
nameInterval = setInterval(function() {
const randomIndex = Math.floor(Math.random() * names.length);
document.getElementById("name-display").innerHTML = "<h1>" + names[randomIndex] + "</h1>";
}, 120);
}
function showFinalName() {
setTimeout(function() {
clearInterval(nameInterval);
const finalName = names[Math.floor(Math.random() * names.length)];
document.getElementById("name-display").innerHTML = "<h1>" + finalName + "</h1>";
}, 10000);
}
startCountdown();
startRandomNames();
showFinalName();
</script>
</body>
</html>
Dalam kode di atas, kita membuat array names yang berisi daftar nama yang akan ditampilkan sebagai pemenang. Fungsi startRandomNames akan dipanggil setiap 120 mili detik untuk menampilkan nama secara acak pada elemen name-display.
Dengan mengikuti langkah-langkah di atas, Anda dapat membuat animasi kode JavaScript sederhana untuk menampilkan nama secara acak bergantian sebagai pemenang pada halaman web Anda. Selamat mencoba!
Terima kasih telah membaca artikel ini. Semoga bermanfaat untuk pengembangan proyek web Anda! Jangan ragu untuk bereksperimen dan menyesuaikan kode sesuai kebutuhan Anda.
0 komentar:
Posting Komentar