Cara menggunakan Generator Animasi Partikel
- Pilih efek — lalu klik + Add layer untuk menumpuk lebih banyak (misalnya salju plus bintang jatuh); hapus lapisan dengan tanda ×. Efek yang tersedia: salju, kepingan salju, hujan, bintang jatuh, bintang jatuh (falling stars), confetti, kelopak, daun, hati, gelembung — atau My SVG / image untuk unggah sendiri, atau Emoji.
- Atur jumlah, ukuran, kecepatan, angin, dan goyangan. Pause between membuat partikel muncul sesekali, seperti bintang jatuh.
- Pilih apakah efek menutupi seluruh halaman (overlay tetap) atau satu bagian.
- Salin HTML + CSS (tanpa JavaScript) atau versi JavaScript yang lebih pendek, atau unduh halaman demo.
Cara kerja animasinya
Setiap partikel adalah elemen <i> dengan ukuran, posisi awal, durasi, dan delay sendiri yang disimpan dalam CSS custom properties. Satu aturan @keyframes menggerakkan partikel dari atas tepi layar sampai ke bawah bbagian bawah; elemen <b> di dalamnya bergoyang ke kiri-kanan dan berputar. Hanya transform yang dianimasikan, sehingga browser menjalankannya di GPU tanpa menghitung ulang tata letak halaman.
.dp-fall { position: fixed; inset: 0; overflow: hidden; pointer-events: none; container-type: size; }
.dp-fall i { position: absolute; top: 0; animation: dp-fall var(--d) linear var(--t) infinite; }
@keyframes dp-fall { to { transform: translate(var(--dx), calc(100cqh + var(--s) * 3)); } }Delay negatif membuat setiap partikel mulai di tengah jalan jatuhnya, sehingga layar sudah penuh saat halaman dimuat. pointer-events: none membiarkan klik tembus, dan prefers-reduced-motion menyembunyikan efek bagi pengunjung yang mematikan animasi.
Menggunakan SVG sendiri
Pilih My SVG / image dan unggah SVG, PNG, WebP, atau GIF kecil — logo, kepingan salju, atau koin. File tersebut disematkan di CSS sebagai data URI, jadi cuplikan kode tetap tidak membutuhkan file tambahan. Bentuk bawaan digambar dengan CSS mask, jadi Mixed colors dapat mewarnai ulang setiap bentuk.
Terkait: CSS Keyframes Generator, CSS Animation Generator, SVG Blob Generator.
Juga dicari sebagai: efek partikel css, efek salju css, animasi salju jatuh css, animasi hujan css, animasi bintang jatuh css, efek confetti css, animasi daun jatuh, generator animasi css.
Tool yang cocok dipakai bersama Generator Animasi Partikel
- Generator Wave SVG — Rancang pemisah bagian bergelombang untuk landing page: tambah atau hapus gelombang (hingga 6, masing-masing dengan warna, opasitas, dan bentuk sendiri), atur jumlah puncak, tinggi, dan kehalusan, pilih warna, serta tentukan apakah gelombang berada di atas atau bawah.
- Generator CSS Loader — Pilih dari 13 spinner loading berbasis CSS murni, atur ukuran, warna, ketebalan, dan kecepatan, lalu salin HTML dan CSS yang ringan dan ramah aksesibilitas — tanpa gambar, SVG, atau JavaScript.
- Generator Gradient CSS — Rancang gradient secara visual — geser titik warna, ubah sudut atau jenisnya, mulai dari preset — lalu salin CSS siap pakai dengan warna solid sebagai fallback.
- Generator Animasi Hover CSS — Rancang animasi hover untuk tombol, kartu, tautan, dan ikon.