Proyek Web: Membuat Efek Melayang Anti-Gravitasi dengan CSS

Halo Sobat Jurnal Coding! Mari kita lanjutkan keseruan tema Antigravitasi yang sudah kita bahas di seri Toolkit sebelumnya. Kali ini, kita tidak hanya akan membahas konsep atau cerita sejarah saja, tetapi kita akan langsung mempraktikkannya ke dalam proyek nyata!

Pernahkah kamu mengunjungi sebuah website startup teknologi yang terlihat sangat hidup? Saat kamu membuka halaman berandanya, elemen-elemen di dalamnya (seperti gambar maskot 3D, roket, atau kotak harga) tidak hanya diam mematung, melainkan bergerak naik-turun secara perlahan seolah-olah mereka sedang melayang di luar angkasa tanpa gravitasi. Efek visual semacam ini akan membuat pengunjung website-mu berdecak kagum dan merasa betah berlama-lama menatap layar.

Banyak pemula yang mengira bahwa untuk membuat animasi sehalus itu, mereka harus mempekerjakan animator, menggunakan file video GIF yang berat, atau mengetik puluhan baris kode JavaScript yang rumit. Faktanya? Sama sekali tidak! Kamu bisa menciptakan ilusi sihir antigravitasi ini murni hanya dengan mengandalkan sepotong bahasa CSS.

### Sihir Animasi dan Keyframes

Untuk membuat benda mati menjadi hidup, CSS menyediakan sebuah fitur canggih yang bernama Animation dan Keyframes.

Bayangkan Keyframes ini sebagai seorang sutradara film. Sang sutradara bisa memberikan instruksi kepada aktornya: Pada detik ke-nol, kamu diam berdiri di tanah. Pada pertengahan adegan, kamu melompat sejauh 20 piksel ke udara. Dan di akhir adegan, kamu harus mendarat kembali ke posisi semula.

Mari kita lihat bagaimana instruksi sutradara tersebut ditulis ke dalam bahasa CSS. Siapkan file HTML kamu, buat sebuah kotak sederhana, lalu masukkan kode CSS sakti berikut ini:

/* 1. Menulis Naskah Skenario (Keyframes) */

@keyframes efekMelayang {

    0% {

        transform: translateY(0px);

    }

    50% {

        transform: translateY(-20px); /* Benda terbang 20px ke arah atas */

    }

    100% {

        transform: translateY(0px); /* Benda mendarat kembali ke titik awal */

    }

}

/* 2. Menugaskan Aktor (Elemen HTML) untuk Mengikuti Skenario */

.benda-antigravitasi {

    width: 200px;

    height: 200px;

    background-color: #00ffff;

    border-radius: 20px;

    /* Memanggil animasi yang sudah dibuat di atas */

    animation-name: efekMelayang;

    animation-duration: 3s; /* Animasi berdurasi total 3 detik */

    animation-iteration-count: infinite; /* Diulang terus menerus tanpa henti */

    animation-timing-function: ease-in-out; /* Pergerakan diperhalus secara natural */

}

### Membedah Keajaiban Visual

Coba satukan kode tersebut dengan file HTML kamu dan jalankan di browser. Kotak beraksen cyan tersebut akan langsung bergerak naik-turun tanpa henti, dengan pergerakan yang sangat lembut!

Rahasia kelembutan gerakan tersebut terletak pada fungsi ease-in-out. Fungsi ini memastikan bahwa saat kotak mulai terbang ke atas, ia akan melambat sedikit di puncak tertinggi sebelum gravitasi menariknya kembali, lalu turun ke bawah dan melambat lagi secara elegan saat mendarat. Gerakan dinamis inilah yang menciptakan ilusi mengambang di udara yang sangat realistis, persis seperti hukum fisika benda yang melayang di dalam air laut.

Teknik sederhana ini adalah kunci dari antarmuka modern (User Interface). Kamu bisa menerapkannya pada tombol logo, gambar ilustrasi artikel, atau kotak harga langganan. Kini kamu telah berhasil memanipulasi gravitasi digital. Di proyek selanjutnya, kita akan menggabungkan keahlian desain ini dengan kecerdasan JavaScript untuk membuat sebuah tombol yang sangat menyebalkan dan mustahil diklik! Siapkan logikamu!