Proyek Visual: Efek Parallax Scroll Bergaya Luar Angkasa

Halo Sobat Jurnal Coding! Kita telah sampai di proyek penutup untuk seri Antigravitasi kita yang seru ini. Setelah berhasil membuat elemen terbang dengan CSS Keyframes dan merakit tombol jahil yang berteleportasi, hari ini kita akan membuat sebuah ilusi visual tingkat dewa yang sangat sering dipakai oleh website perusahaan teknologi raksasa (seperti Apple atau Tesla).

Efek magis ini bernama Parallax Scrolling. Pernahkah kamu naik kereta api yang melaju kencang dan menatap keluar jendela? Kamu pasti menyadari sebuah hukum alam: pohon-pohon atau tiang listrik di pinggir rel bergerak sangat cepat ke arah belakang, sedangkan gunung besar di kejauhan bergerak sangat lambat. Perbedaan kecepatan gerak inilah yang diartikan oleh otak kita sebagai ilusi kedalaman atau tiga dimensi (3D).

Di dunia web, kita bisa menciptakan efek antigravitasi ini dengan sangat mudah. Kita akan membuat gambar latar belakang (seperti taburan bintang di luar angkasa) diam menempel di belakang, sementara teks artikel yang kamu gulir (scroll) meluncur ringan di atasnya.

### Sihir Murni Tanpa JavaScript

Banyak pemula yang ketakutan dan mengira bahwa efek Parallax membutuhkan ratusan baris kode JavaScript yang rumit. Faktanya, di era modern ini, kamu bisa menciptakan ilusi ruang hampa udara tersebut hanya dengan SATU baris properti CSS khusus.

Siapkan file HTML kamu, cari gambar latar belakang bintang luar angkasa yang keren, lalu masukkan mahakarya kode berikut ini:

/* 1. Menyiapkan Ruang Angkasa (Wadah Latar Belakang) */

.jendela-parallax {

    /* Tentukan URL gambar bintang luar angkasamu di sini */

    background-image: url("https://images.pexels.com/photos/110854/pexels-photo-110854.jpeg");

    /* Tentukan tinggi jendela agar bisa digulir */

    min-height: 500px;

    /* INILAH MANTRA SAKTINYA! */

    background-attachment: fixed;

    /* Memastikan gambarnya pas dan tidak terpotong */

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

}

/* 2. Menyiapkan Teks yang Melayang di Atasnya */

.teks-melayang {

    height: 1000px; /* Sengaja dibuat sangat panjang agar halaman bisa di-scroll */

    background-color: #121212;

    color: white;

    padding: 50px;

    font-size: 24px;

}

### Membedah Keajaiban Visual

Mantra paling vital dalam kode di atas adalah background-attachment: fixed. Secara bawaan komputer (default), saat pengunjung menggulir layar ke bawah, gambar latar belakang akan ikut terbawa naik dan akhirnya menghilang dari layar.

Namun, dengan menambahkan perintah fixed tersebut, kita memaku gambar bintang tersebut ke dinding terdalam monitor pengunjung. Akibatnya, saat pengunjung menggulir teks bacaan, teks tersebut seolah-olah mengapung di udara, melewati hamparan bintang yang statis di belakangnya. Efek ini memberikan kesan kedalaman layar yang sangat dramatis.

Coba gabungkan kode CSS tersebut ke dalam elemen DIV HTML kamu dan jalankan di browser. Gulir mouse kamu ke atas dan ke bawah. Rasakan sensasi premium dari desain antarmuka yang baru saja kamu ciptakan! Setelah menguasai teknik memanjakan mata ini, bersiaplah, karena di artikel Konsep Dasar berikutnya, kita akan menyelami jenis antigravitasi yang sesungguhnya: Kecerdasan Buatan (AI)!