Cara Membuat Animasi Radar Keren dengan CSS & JavaScript Responsif Mobile
Artikel berikut membahas mengenai : Cara Membuat Animasi Radar Keren dengan CSS & JavaScript Responsif Mobile
Halo pembaca setia!
Apakah Anda sedang mencari animasi radar keren untuk mempercantik website atau blog Anda? Di postingan kali ini, kami akan membagikan tutorial lengkap membuat animasi radar interaktif menggunakan HTML5, CSS3, dan JavaScript yang 100% responsive dan mobile-friendly.
Animasi radar modern ini cocok untuk:
✔️ Template website bertema teknologi/militer
✔️ Efek visual game berbasis browser
✔️ Projek pembelajaran coding pemula
✔️ Komponen UI/UX yang eye-catching
Fitur Unggulan:
✅ Desain futuristik dengan efek glow hijau
✅ Animasi sweep radar yang mulus
✅ Blip/titik target acak yang realistis
✅ Ukuran responsif otomatis (desktop & mobile)
✅ Performa ringan tanpa lag
Kode yang kami bagikan sudah terpisah antara HTML, CSS, dan JavaScript, sehingga mudah dikustomisasi sesuai kebutuhan. Tutorial ini sangat cocok untuk pemula yang ingin belajar animasi web tanpa plugin.
<html lang="en">
<head>
<meta charset="UTF-8"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<title>Radar Animation</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
font-family: 'Arial', sans-serif;
}
.radar-container {
position: relative;
width: 90vmin;
height: 90vmin;
max-width: 400px;
max-height: 400px;
}
.radar {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background:
radial-gradient(circle at center,
rgba(0, 255, 0, 0.1) 0%,
transparent 70%);
border: 2px solid rgba(0, 255, 0, 0.5);
box-shadow:
0 0 10px rgba(0, 255, 0, 0.3),
inset 0 0 10px rgba(0, 255, 0, 0.3);
overflow: hidden;
}
.sweep {
position: absolute;
width: 100%;
height: 100%;
background: conic-gradient(
from 0deg,
transparent 0deg,
rgba(0, 255, 0, 0.3) 60deg,
transparent 120deg
);
animation: rotate 3s linear infinite;
z-index: 2;
}
.grid-lines {
position: absolute;
width: 100%;
height: 100%;
}
.grid-line {
position: absolute;
background: rgba(0, 255, 0, 0.2);
}
.horizontal {
width: 100%;
height: 1px;
top: 50%;
left: 0;
}
.vertical {
width: 1px;
height: 100%;
top: 0;
left: 50%;
}
.diagonal-1 {
width: 100%;
height: 1px;
top: 50%;
left: 0;
transform: rotate(45deg);
transform-origin: center;
}
.diagonal-2 {
width: 100%;
height: 1px;
top: 50%;
left: 0;
transform: rotate(-45deg);
transform-origin: center;
}
.circles {
position: absolute;
width: 100%;
height: 100%;
}
.circle {
position: absolute;
border: 1px solid rgba(0, 255, 0, 0.2);
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle-1 { width: 80%; height: 80%; }
.circle-2 { width: 60%; height: 60%; }
.circle-3 { width: 40%; height: 40%; }
.circle-4 { width: 20%; height: 20%; }
.center-dot {
position: absolute;
width: 8px;
height: 8px;
background: rgba(0, 255, 0, 0.8);
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
box-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
}
.blip {
position: absolute;
width: 12px;
height: 12px;
background: rgba(0, 255, 0, 0.8);
border-radius: 50%;
transform: translate(-50%, -50%);
z-index: 3;
animation: pulse 2s infinite;
box-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes pulse {
0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.8; }
50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.8; }
}
.info-text {
position: absolute;
bottom: -40px;
left: 0;
width: 100%;
text-align: center;
color: rgba(0, 255, 0, 0.7);
font-size: 14px;
text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
}
</style>
</head>
<body>
<div class="radar-container">
<div class="radar">
<div class="grid-lines">
<div class="grid-line horizontal"></div>
<div class="grid-line vertical"></div>
<div class="grid-line diagonal-1"></div>
<div class="grid-line diagonal-2"></div>
</div>
<div class="circles">
<div class="circle circle-1"></div>
<div class="circle circle-2"></div>
<div class="circle circle-3"></div>
<div class="circle circle-4"></div>
</div>
<div class="sweep"></div>
<div class="center-dot"></div>
</div>
<div class="info-text">Radar Scanning System</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const radar = document.querySelector('.radar');
// Create random blips
function createBlip() {
const blip = document.createElement('div');
blip.className = 'blip';
// Position randomly within radar (but not too close to center)
const angle = Math.random() * Math.PI * 2;
const distance = 0.2 + Math.random() * 0.6; // 20-80% from center
const x = 50 + Math.cos(angle) * distance * 50;
const y = 50 + Math.sin(angle) * distance * 50;
blip.style.left = `${x}%`;
blip.style.top = `${y}%`;
radar.appendChild(blip);
// Remove blip after some time
setTimeout(() => {
blip.remove();
}, 2000 + Math.random() * 3000);
}
// Create initial blips
for (let i = 0; i < 5; i++) {
setTimeout(createBlip, i * 800);
}
// Continue creating blips periodically
setInterval(() => {
if (Math.random() > 0.3) { // 70% chance to create new blip
createBlip();
}
}, 1000);
// Handle window resize
function handleResize() {
const container = document.querySelector('.radar-container');
const size = Math.min(window.innerWidth, window.innerHeight) * 0.9;
container.style.width = `${size}px`;
container.style.height = `${size}px`;
}
window.addEventListener('resize', handleResize);
handleResize();
});
</script>
</body>
</html>
Gabung dalam percakapan