Search articles, tutorials, tips...
Pelajari cara membuat efek api prosedural. Tutorial ini menggabungkan mode campuran CSS untuk tampilan bercahaya dan JavaScript untuk menghasilkan gerakan partikel acak.
Thanks for reading!
If you found this article helpful, maybe you could help share it.
Mari berkenalan dengan hibuno.com sebuah portofolio pribadi Muhibbudin Suretno. Yang menampilkan artikel, tutorial, maupun proyek sumber terbuka secara gratis.
Kuasai seni CSS satu elemen dengan membuat simbol Yin-Yang klasik yang berputar. Tutorial ini menguraikan cara menggunakan gradien, elemen semu (pseudo-elements), dan keyframe CSS untuk membuat geometri kompleks tanpa gambar.
Dalam tutorial ini, kita akan membuat efek api biru yang ajaib. Tidak seperti gambar statis, api ini bersifat prosedural. Kita menggunakan JavaScript untuk menghasilkan puluhan partikel kecil dan CSS untuk menggerakkannya ke atas, menciptakan tampilan yang cair dan organik.
Kunci agar elemen div terlihat seperti api, bukan hanya lingkaran biru, adalah mix-blend-mode: screen. Ketika partikel-partikel ini saling tumpang tindih, warnanya akan menyatu (additive), menciptakan pusat yang putih panas dan tepi yang transparan.
HTML kita sangat sederhana. Kita hanya membutuhkan wadah (container) untuk menampung api kita.
<div class="circle" id="circle"></div>Kita menggunakan CSS Keyframes untuk menentukan perilaku satu partikel. Partikel dimulai dari bawah, memudar masuk (fade in), bergerak ke atas (translateY), dan akhirnya memudar keluar sambil mengecil.
@keyframes rise {
from {
opacity: 0;
transform: translateY(0) scale(1);
}
25% {
opacity: 1;
}
to {
opacity: 1;
transform: translateY(-10em) scale(0);
}
}
@keyframes orbit {
from {
transform: translate(-50%, -50%) rotate(0deg) translateX(12em)
rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg) translateX(12em)
rotate(-360deg);
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #080830;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
}
.circle {
position: relative;
width: 40px;
height: 40px;
font-size: 24px;
transform: scale(0.5);
}
.fire {
filter: blur(0.02em);
position: absolute;
width: 10em;
height: 12em;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.fire.orb {
z-index: 10;
}
.fire.around {
width: 6em;
height: 7.2em;
font-size: 16px;
animation: orbit 8s linear infinite;
}
.flame {
animation: rise 2s ease-out infinite;
background-image: radial-gradient(
#0080ff 10%,
#00a0ff 30%,
rgba(0, 160, 255, 0) 70%
);
border-radius: 50%;
mix-blend-mode: screen;
opacity: 0;
position: absolute;
bottom: 0;
width: 5em;
height: 5em;
}Menulis 50 elemen div secara manual sangat melelahkan. Kita menggunakan JavaScript untuk membuatnya secara otomatis. Kita juga menambahkan pengacakan (randomness) pada penundaan animasi agar api tidak terlihat seperti pola yang berulang kaku.
const circle = document.getElementById("circle");
const flameCount = 50;
circle.appendChild(createFire("orb"));
for (let i = 0; i < 8; i++) {
circle.appendChild(createFire("around", i));
}
function createFire(className, index = null) {
const fire = document.createElement("div");
fire.className = `fire ${className}`;
for (let i = 0; i < flameCount; i++) {
const flame = document.createElement("div");
flame.className = "flame";
const delay = Math.random() * 1.5;
flame.style.animationDelay = `${delay}s`;
const duration = 1.2 + (Math.random() * 0.4 - 0.2);
flame.style.animationDuration = `${duration}s`;
const leftPosition = (i / (flameCount - 1)) * 100;
flame.style.left = `calc((100% - 5em) * ${leftPosition / 100})`;
fire.appendChild(flame);
}
if (index) {
fire.style.animationDelay = `${-index * 1}s`;
fire.style.setProperty("--angle", `${index * 45}deg`);
}
return fire;
}Dengan menghasilkan banyak elemen yang saling tumpang tindih dengan sedikit variasi acak dalam kecepatan dan waktu, kita mensimulasikan sifat kacau api asli menggunakan elemen DOM standar.