Vibe Coding Series
Biar nggak bengong tiap nemu istilah asing waktu belajar bikin web. Semua istilah dijelaskan pakai bahasa santai, gampang dicerna — lengkap sama contoh animasi & elemen yang bisa kamu coba langsung
Animasi & Interaksi
Fade in adalah animasi elemen yang muncul perlahan dari transparan ke terlihat penuh. Fade out kebalikannya, elemen menghilang perlahan dari terlihat ke transparan. Bikin transisi konten kerasa halus, nggak tiba-tiba muncul atau hilang aja.
Animasi elemen yang masuk ke layar dengan gerakan geser dari salah satu sisi — kiri, kanan, atas, atau bawah. Bikin tampilan elemen kerasa lebih hidup pas pertama muncul.
Properti yang bikin perubahan tampilan — warna, ukuran, posisi — terjadi secara halus dan bertahap, bukan langsung berubah tiba-tiba. Coba tap kotak di bawah ini.
Ikon berputar yang menandakan sistem sedang memproses sesuatu di belakang layar, biar pengguna tahu untuk menunggu sebentar.
Placeholder abu-abu yang "berkedip" pelan, muncul sebagai pengganti sementara sebelum konten asli (gambar atau teks) selesai dimuat.
Tombol geser on/off yang biasa dipakai buat mengaktifkan atau mematikan sebuah fitur dengan sekali tap.
Elemen yang bisa dibuka-tutup untuk menyembunyikan atau menampilkan konten, biar halaman nggak penuh sesak. Biasa dipakai di bagian FAQ.
Cara bikin web/app pakai bantuan AI, tanpa harus jago ngoding dari nol.
Kotak info kecil yang muncul saat kamu tap atau arahkan kursor ke sebuah elemen, biasanya buat ngasih penjelasan singkat tanpa harus pindah halaman.
Jendela kecil yang muncul mengambang di atas halaman utama, biasanya dipakai untuk konfirmasi, info penting, atau form tambahan tanpa harus pindah halaman.
Halo, ini contoh modal!
Efek riak/gelombang kecil yang menyebar dari titik sentuh saat tombol ditekan, ngasih kesan tombolnya "hidup" dan responsif.
Efek di mana background dan konten bergerak dengan kecepatan berbeda saat halaman di-scroll, bikin kesan tampilan jadi lebih "dalam" atau 3D.
Teknik memuat gambar atau konten hanya saat dibutuhkan — misalnya pas pengguna scroll sampai ke bagian itu — biar halaman web kerasa lebih ringan dan cepat dibuka.
Menu yang muncul ke bawah saat sebuah tombol ditekan, biasanya buat nampilin beberapa pilihan tanpa makan banyak tempat di layar. Coba tap tombolnya.
Tampilan yang menampilkan beberapa konten (gambar atau info) secara bergantian dalam satu area, bisa digeser manual atau jalan otomatis. Sering dipakai buat banner promo di landing page.
Elemen & Style Dasar
Padding adalah jarak kosong di dalam elemen, antara isi/konten dengan tepi elemen itu sendiri. Margin adalah jarak kosong di luar elemen, antara elemen itu dengan elemen lain di sekitarnya. Coba geser slider-nya.
Properti buat melengkungkan sudut-sudut sebuah kotak atau elemen, dari kotak tegas sampai bulat penuh.
Efek bayangan di sekeliling elemen yang bikin tampilannya terasa "terangkat" atau melayang dari latar belakang.
"Kotak" pembungkus yang dipakai untuk mengelompokkan elemen-elemen lain di dalam sebuah halaman — semacam wadah, biar struktur halaman lebih rapi dan mudah diatur.
Sistem layout di CSS yang bikin elemen-elemen bisa disusun secara fleksibel — sejajar, di tengah, atau menyebar — tanpa ribet hitung posisi manual. Coba pencet tombolnya.
Properti yang menentukan elemen mana yang tampil paling depan, saat ada beberapa elemen yang posisinya bertumpukan.
Bar visual yang menunjukkan seberapa jauh sebuah proses sudah berjalan, misalnya upload file atau pengisian profil.
35% selesai
Label kecil berbentuk pil buat nunjukin status, kategori, atau jumlah, misalnya "Baru", "Pending", atau notifikasi angka.
Gambar atau inisial bulat yang mewakili identitas pengguna, sering dipakai di navbar, komentar, atau daftar anggota tim.
Pesan kecil yang muncul sebentar di pojok atau bawah layar buat ngasih tahu sesuatu terjadi, lalu hilang sendiri.
Kolom tempat pengguna mengetik data, biasanya dilengkapi label dan pesan validasi kalau isiannya belum benar.
Belum ada kesalahan
Elemen buat memilih opsi: checkbox untuk pilihan boleh lebih dari satu, radio button untuk pilihan cuma satu dari beberapa opsi.
Animasi Baru, Frame & Loop
Animasi yang diulang terus-menerus lewat animation-iteration-count: infinite. Tahap geraknya ditulis di @keyframes. Cocok untuk loading atau elemen yang menarik perhatian.
Elemen yang membesar dan memudar berulang seperti denyut jantung, sering dipakai untuk notifikasi atau tombol penting.
Elemen naik sedikit dan bayangannya membesar saat disentuh atau di-hover. Kombinasi transform, shadow, dan transition.
Panel transparan dengan backdrop-filter: blur dan border tipis, jadi seperti kaca buram di atas latar warna-warni.
Latar gradasi yang bergeser perlahan lewat animasi background-position. Kesannya hidup tanpa gambar.
Teks muncul huruf demi huruf seperti diketik, dibuat dengan animasi width bertahap (steps) dan kursor berkedip.
Elemen baru muncul saat terlihat di layar, dideteksi pakai IntersectionObserver di JavaScript. Scroll halaman ini sampai kotak di bawah kelihatan.
Kartu yang berputar 3D untuk menampilkan sisi belakangnya, dibuat dengan rotateY dan backface-visibility. Tap kartunya.
Elemen bergetar ke kiri-kanan, biasanya buat memberi tahu input salah atau aksi ditolak.
Border bisa diatur tebal, warna, dan gaya. Border juga bisa dianimasikan, misalnya border gradasi yang berputar.
Bingkai membungkus gambar atau tampilan, misalnya bingkai foto polaroid dengan padding, bayangan, dan sedikit rotasi.
Susunan dasar sebuah halaman: header di atas, sidebar dan konten utama di tengah, footer di bawah. Tap tiap bagian buat menyorotnya.
Loop mengulang aksi sebanyak yang kamu mau tanpa menulis kode berkali-kali. Geser angka, lalu JavaScript membuat kotak sebanyak itu pakai for (let i = 1; i <= n; i++).
Elemen naik-turun pelan dan berulang seperti mengambang. Bayangannya ikut mengecil saat naik supaya terasa melayang. Dibuat dengan @keyframes, translateY, dan infinite (loop).
Tombol bulat yang menempel di pojok layar dan tetap kelihatan walau konten di-scroll, memakai position: fixed (di demo ini absolute di dalam layar HP) plus shadow. Tap tombolnya.
Label di dalam kolom isian yang naik dan mengecil saat kolom diklik atau diisi. Memakai CSS :focus dan transition. Coba klik kolomnya.
Tutup DevTools lalu muat ulang halaman ini.
© 2026 KniaConnect