Pernah nggak, kamu mampir ke website tertentu dan langsung terkesima — tombolnya bergerak halus, warna berubah saat di-klik, konten muncul dengan animasi yang mulus? Kamu mungkin pikir, "pasti ada plugin canggih di balik ini." Ternyata, banyak efek memukau itu dibuat dengan satu senjata sederhana: manipulasi CSS dengan JavaScript. Ya, manipulasi CSS JavaScript animasi web adalah skill yang lebih powerful dari yang kamu bayangkan — dan artikel ini akan mengajarkan kamu dari nol, tanpa instalasi plugin apapun.
Kalau kamu sudah mengikuti Seri Belajar Javascript from Zero to Zorro dan sudah paham DOM di artikel ke-6 serta event di artikel ke-7, sekarang saatnya kamu naik level: kendalikan tampilan visual halaman web secara dinamis lewat JavaScript. Siap? Mari mulai.
Manipulasi CSS dengan JavaScript adalah teknik mengubah style (gaya tampilan) elemen HTML secara langsung menggunakan kode JavaScript — baik lewat properti style, menambah/hapus class, maupun menggunakan CSS Custom Properties — tanpa perlu me-reload halaman atau menggunakan library eksternal.
🎛️ Tiga Cara JavaScript Mengontrol Tampilan CSS
Bayangkan CSS itu seperti lemari baju. JavaScript bisa mengubah pakaian yang dipakai elemen HTML kamu dengan tiga cara berbeda. Ketiganya punya kelebihan masing-masing.
Gunakan classList sebagai senjata utamamu. Kenapa? Karena semua efek visualnya sudah kamu definisikan di CSS, jadi lebih rapi dan mudah di-maintain. JavaScript cukup bilang "pakai class ini" atau "lepas class itu".
Cara 1 — Langsung Ubah Style dengan element.style
Pertama, ambil elemen HTML menggunakan getElementById atau querySelector seperti yang kamu pelajari di Artikel 6.
Akses properti .style lalu tentukan properti CSS-nya. Perhatian: nama properti CSS yang punya tanda hubung (seperti background-color) diubah jadi camelCase di JavaScript (backgroundColor).
Tetapkan nilainya sebagai string — persis seperti kamu menulis nilai CSS biasa.
// Ambil elemen tombol
const tombol = document.querySelector('#tombolku');
// Langsung ubah style saat diklik
tombol.addEventListener('click', function() {
tombol.style.backgroundColor = '#6366f1';
tombol.style.color = 'white';
tombol.style.transform = 'scale(1.1)';
tombol.style.transition = 'all 0.3s ease';
});🔄 classList — Cara Pro untuk Manipulasi CSS JavaScript Animasi Web
Kalau style itu seperti kamu langsung mengganti satu pakaian, maka classList itu seperti kamu punya lemari yang sudah diatur outfit-nya — kamu tinggal bilang "pakai outfit A" atau "ganti ke outfit B". Jauh lebih rapi!
classList.toggle() adalah fungsi paling magis di sini. Satu baris kode ini bisa menambahkan class jika belum ada dan menghapusnya jika sudah ada. Cocok banget buat dark mode, menu hamburger, dan accordion.
Berikut empat method classList yang wajib kamu kuasai:
add('nama-class') — menambahkan class baru ke elemen.
remove('nama-class') — menghapus class dari elemen.
toggle('nama-class') — tambah jika belum ada, hapus jika sudah ada.
contains('nama-class') — mengecek apakah class ada (return true/false).
<!-- HTML -->
<button id="toggleMode">🌙 Dark Mode</button>
<div id="halaman">Konten website...</div>
/* CSS */
.dark-mode {
background-color: #0f0f1a;
color: #f8fafc;
}
// JavaScript
const tombol = document.getElementById('toggleMode');
const halaman = document.getElementById('halaman');
tombol.addEventListener('click', () => {
halaman.classList.toggle('dark-mode');
// Ganti teks tombol sesuai mode aktif
const isDark = halaman.classList.contains('dark-mode');
tombol.textContent = isDark ? '☀️ Light Mode' : '🌙 Dark Mode';
});Sekitar 85% animasi web modern dibangun dengan kombinasi CSS transition / animation + classList.toggle() JavaScript. Library besar seperti Tailwind dan Bootstrap pun menggunakan pola yang sama di baliknya!
✨ Membuat Animasi Web dengan CSS Variables & JavaScript
Bayangkan CSS Variables (Custom Properties) seperti remote control universal untuk tampilanmu. Kamu definisikan "saluran-saluran" di CSS, lalu JavaScript tinggal memutar knop dari jarak jauh — dan seluruh tampilan ikut berubah serentak. Ini adalah teknik paling elegan untuk animasi web manipulasi CSS JavaScript yang melibatkan banyak elemen sekaligus, seperti pergantian tema warna.
Harus ubah warna satu per satu di setiap elemen. 10 elemen = 10 baris kode JavaScript. Sangat tidak efisien dan susah di-maintain.
Ubah satu variabel di root, semua elemen yang menggunakannya ikut berubah otomatis. 10 elemen = tetap 1 baris kode JavaScript!
/* CSS — definisikan variabel di :root */
:root {
--warna-utama: #6366f1;
--warna-bg: #ffffff;
--warna-teks: #1e293b;
}
.kotak {
background-color: var(--warna-bg);
color: var(--warna-teks);
border: 2px solid var(--warna-utama);
}
// JavaScript — ubah variabel, semua elemen ikut berubah!
const root = document.documentElement;
function gantiTemaMalam() {
root.style.setProperty('--warna-utama', '#a5b4fc');
root.style.setProperty('--warna-bg', '#0f0f1a');
root.style.setProperty('--warna-teks', '#f8fafc');
}🚀 Proyek Mini: Kartu Animasi Interaktif
Sekarang gabungkan semua yang sudah kamu pelajari. Kita buat kartu produk yang animasinya mulus saat di-hover dan di-klik — 100% tanpa plugin. Ini contoh nyata animasi web manipulasi CSS JavaScript yang langsung bisa kamu pakai.
Buat HTML dengan struktur kartu sederhana dan tambahkan class kartu ke setiap elemen kartu.
Definisikan animasi di CSS menggunakan transition dan class .aktif.
Gunakan querySelectorAll untuk ambil semua kartu dan pasang event listener di masing-masing.
Toggle class .aktif saat kartu diklik. Satu baris JavaScript, animasi penuh berjalan!
<!-- HTML -->
<div class="kartu">
<h3>🎨 Desain Kreatif</h3>
<p>Klik kartu ini!</p>
</div>
/* CSS */
.kartu {
padding: 20px;
border-radius: 12px;
background: #f8fafc;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease,
background-color 0.3s ease;
}
.kartu.aktif {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 16px 40px rgba(99,102,241,0.25);
background-color: #6366f1;
color: #fff;
}
// JavaScript
const semuaKartu = document.querySelectorAll('.kartu');
semuaKartu.forEach(kartu => {
kartu.addEventListener('click', () => {
kartu.classList.toggle('aktif');
});
});Jangan terlalu banyak menggunakan element.style langsung (inline style) karena akan mempersulit debugging dan override CSS di masa mendatang. Selalu utamakan pendekatan class-based untuk proyek yang skalanya besar.
⚙️ Teknik Lanjutan: setInterval & requestAnimationFrame
Selain toggle class, kamu juga bisa membuat animasi yang berjalan otomatis menggunakan setInterval atau versi yang lebih smooth: requestAnimationFrame. Ini berguna untuk progress bar, loading animasi, atau efek typewriter.
const bar = document.getElementById('progressBar');
let progres = 0;
function animasiBar() {
if (progres <= 100) {
bar.style.width = progres + '%';
progres += 1;
requestAnimationFrame(animasiBar); // lebih halus dari setInterval
}
}
animasiBar(); // mulai animasiGunakan requestAnimationFrame daripada setInterval untuk animasi JavaScript. Kenapa? Karena browser akan menyinkronkan animasi dengan refresh rate layar (biasanya 60fps), hasilnya lebih smooth dan lebih hemat baterai perangkat mobile.
Artikel ini adalah bagian dari 14 artikel yang akan membawamu dari nol hingga mahir JavaScript. Klik di bawah untuk melihat daftar isi lengkapnya.
🗂️ Lihat Daftar Isi 14 Artikel →Pelajari fondasi dulu sebelum terjun lebih jauh ke JavaScript. Dua seri ini wajib kamu kuasai:
No comments:
Post a Comment