Efek parallax scrolling CSS merupakan teknik desain web yang menciptakan ilusi kedalaman (depth) dengan cara membuat latar belakang (background) bergerak lebih lambat dibandingkan elemen di depannya saat pengguna melakukan scrolling. Teknik ini sudah banyak digunakan dalam desain web modern untuk menambah daya tarik visual tanpa perlu menggunakan JavaScript.
Dalam tutorial kali ini, kita akan membahas cara membuat efek parallax scrolling dengan CSS secara lengkap. Kamu akan belajar bagaimana cara menambahkan efek parallax sederhana, mengatur background agar responsif, serta menerapkan efek parallax pada berbagai elemen halaman web.
Daftar isi
- Apa Itu Efek Parallax Scrolling?
- Mengapa Menggunakan Efek Parallax?
- Struktur Dasar HTML untuk Efek Parallax
- CSS Dasar untuk Efek Parallax Background
- Penjelasan Properti CSS Penting
- Membuat Beberapa Lapisan Parallax
- Membuat Efek Parallax Responsif
- Tips Optimasi Efek Parallax
- Perbandingan CSS Parallax dan JavaScript Parallax
- Kesimpulan
Baca juga: Tutorial CSS Hover Effect untuk Tombol dan Gambar
Apa Itu Efek Parallax Scrolling?
Efek parallax scrolling berasal dari dunia animasi dan video game klasik, di mana beberapa lapisan (layer) gambar bergerak dengan kecepatan berbeda untuk menciptakan efek tiga dimensi.
Dalam konteks web, efek ini membuat website tampak lebih hidup, interaktif, dan profesional.
Sebagai contoh, bayangkan kamu menggulir halaman dan melihat gambar latar belakang bergerak lebih lambat daripada teks di atasnya — itulah parallax effect CSS.
Mengapa Menggunakan Efek Parallax?
Efek CSS parallax background tidak hanya menambah estetika tetapi juga memiliki manfaat seperti:
- Menarik perhatian pengguna pada bagian tertentu dari halaman.
- Memberikan kesan profesional dan modern pada desain web.
- Meningkatkan user engagement dengan elemen interaktif.
- Dapat diterapkan tanpa JavaScript, hanya menggunakan HTML dan CSS murni.
Namun, penting untuk tetap memperhatikan performa, karena penggunaan gambar besar pada parallax website CSS dapat mempengaruhi kecepatan loading.
Struktur Dasar HTML untuk Efek Parallax
Kita akan mulai dengan membuat struktur HTML sederhana untuk mendukung efek parallax scrolling
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Efek Parallax Scrolling CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="parallax"></section>
<section class="content">
<h1>Selamat Datang di Tutorial Efek Parallax</h1>
<p>Belajar cara membuat efek parallax scrolling dengan CSS secara mudah di <a href="bahasawebcom">Bahasaweb.com</a>.</p>
</section>
<section class="parallax"></section>
</body>
</html>Code language: HTML, XML (xml)CSS Dasar untuk Efek Parallax Background
Sekarang kita akan menambahkan kode CSS untuk membuat efek background-attachment fixed, yang merupakan dasar dari efek parallax.
body, html {
height: 100%;
margin: 0;
font-family: 'Poppins', sans-serif;
}
.parallax {
background-image: url('https://picsum.photos/1200/800');
height: 100vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.content {
height: 100vh;
background-color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}Code language: CSS (css)Kode di atas membuat bagian dengan class .parallax menampilkan gambar yang “tetap diam” ketika pengguna menggulir halaman. Hasilnya adalah efek parallax scrolling CSS sederhana tanpa JavaScript.
Untuk melihat hasilnya klik link di bawah ini.
Penjelasan Properti CSS Penting
| Properti | Fungsi |
|---|---|
background-attachment: fixed; | Menjaga background agar tidak ikut bergulir bersama konten. |
background-position: center; | Menempatkan background di tengah layar. |
background-size: cover; | Menyesuaikan ukuran gambar agar menutupi seluruh elemen. |
background-repeat: no-repeat; | Mencegah gambar diulang. |
Dengan kombinasi properti tersebut, kita sudah mendapatkan efek parallax background HTML CSS yang halus dan menarik.
Membuat Beberapa Lapisan Parallax
Untuk menambah kedalaman visual, kita dapat membuat multi-layer parallax effect CSS.
<div class="parallax-layer layer1"></div>
<div class="parallax-layer layer2"></div>
<div class="parallax-layer layer3"></div>Code language: HTML, XML (xml).parallax-layer {
position: fixed;
width: 100%;
height: 100vh;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.layer1 {
background-image: url('https://picsum.photos/1200/800');
z-index: 1;
transform: translateZ(-1px) scale(2);
}
.layer2 {
background-image: url('https://picsum.photos/1200/800');
z-index: 2;
}
.layer3 {
background-image: url('https://picsum.photos/1200/800');
z-index: 3;
}Code language: CSS (css)Dengan teknik ini, kamu menciptakan parallax effect responsive yang memberikan kesan tiga dimensi pada halaman web.
Membuat Efek Parallax Responsif
Meskipun background-attachment: fixed bekerja baik di desktop, pada perangkat mobile sering kali tidak didukung. Untuk mengatasi hal ini, kita bisa menggunakan media query agar gambar tetap terlihat proporsional.
@media (max-width: 768px) {
.parallax {
background-attachment: scroll;
}
}Code language: CSS (css)Kode ini membuat CSS parallax scrolling tetap nyaman dilihat di layar kecil.
Tips Optimasi Efek Parallax
- Gunakan gambar berukuran kecil untuk menjaga performa.
- Kompresi background image sebelum diunggah.
- Gunakan lazy loading jika parallax berada di bagian bawah halaman.
- Hindari penggunaan berlebihan agar tidak mengganggu pengalaman pengguna.
- Pastikan efek parallax tetap responsif di semua perangkat.
Perbandingan CSS Parallax dan JavaScript Parallax
| Aspek | CSS Parallax | JavaScript Parallax |
|---|---|---|
| Kinerja | Ringan, cepat dimuat | Sedikit lebih berat |
| Kode | Simpel, mudah dipelajari | Lebih kompleks |
| Kompatibilitas | Kurang optimal di mobile | Dapat dikontrol penuh |
| Kustomisasi | Terbatas | Sangat fleksibel |
Untuk website sederhana, parallax scrolling CSS sudah cukup efektif tanpa perlu JavaScript tambahan.
Kesimpulan
Dengan memanfaatkan CSS parallax background, kamu dapat membuat website terlihat lebih menarik, modern, dan profesional.
Efek ini tidak hanya meningkatkan estetika, tetapi juga memperkaya pengalaman pengguna saat berinteraksi dengan halaman web.
Di artikel ini kamu telah belajar:
- Konsep dasar efek parallax scrolling CSS
- Cara menerapkannya hanya dengan HTML dan CSS murni
- Membuatnya tetap responsif dan ringan
- Menggunakan teknik perspective CSS untuk efek 3D
Dengan pemahaman ini, kamu siap membuat website modern dengan efek parallax yang memukau.
