Cara Membuat Efek Parallax Mudah dengan parallaxx.js
Admin
Penulis Artikel
Efek parallax adalah teknik dimana background bergerak lebih lambat dibanding konten di depannya, sehingga menghasilkan efek kedalaman (3D illusion). Dengan parallaxx-js, kita bisa menambahkan efek ini dengan sangat mudah tanpa harus menulis banyak CSS atau wrapper tambahan.
BACA JUGA: Cara Membuat Animasi Scrollspy dengan Library Scrollspy-js
1. Cara Menggunakan (CDN)
Anda bisa memilih salah satu CDN berikut untuk mengintegrasikan parallaxx-js ke dalam project:
Opsi 1: jsDelivr
<!-- Diletakkan di tag <head> -->
<link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/parallaxx-js/dist/parallax.css>" />
<!-- Diletakkan di tag <body> -->
<script src="<https://cdn.jsdelivr.net/npm/parallaxx-js/dist/parallax.js>"></script>
Opsi 2: unpkg
<!-- Diletakkan di tag <head> -->
<link rel="stylesheet" href="<https://unpkg.com/parallaxx-js/dist/parallax.css>" />
<!-- Diletakkan di tag <body> -->
<script src="<https://unpkg.com/parallaxx-js/dist/parallax.js>"></script>
2. Contoh Dasar
Cukup gunakan class .parallax pada elemen Anda, lalu tambahkan atribut data-*.
<html>
<head>
<title>Parallax Effect</title>
<link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/parallaxx-js/dist/parallax.css>">
</head>
<body>
<div class="parallax"
data-speed="0.5"
data-image="<https://picsum.photos/id/1018/1000/600>">
<h1>Parallax Effect</h1
</div>
<script src="<https://cdn.jsdelivr.net/npm/parallaxx-js/dist/parallax.js>"></script>
</body>
</html>
Pada contoh ini:
data-image→ URL gambar background (wajib).data-speed="0.5"→ menentukan kecepatan efek scroll.Konten (
<h1>Parallax Effect</h1>) tetap berada di atas background.
3. Konfigurasi Atribut
Atribut | Tipe | Default | Deskripsi |
|---|---|---|---|
| URL | – | Gambar background (WAJIB). |
| Number | 0.3 | Kecepatan efek (semakin besar, semakin cepat). |
| String | 100vh | Tinggi area parallax, misalnya |
4. Cara Kerja .parallax
Saat Anda menambahkan class parallax, library akan otomatis:
Membuat container khusus untuk elemen parallax.
Menambahkan lapisan background di belakang konten menggunakan
data-image.Menerapkan transformasi scroll pada lapisan background sesuai nilai
data-speed.Menjaga konten asli tetap di depan dengan z-index lebih tinggi.
➡️ Jadi, Anda tidak perlu membuat wrapper tambahan secara manual.
5. Styling Default
.parallax→position: relative,display: flex,align-items: center,justify-content: center.Tinggi default:
100vh(fullscreen).Background → otomatis
coverdancenter.Bisa digunakan bersama Bootstrap, Tailwind, atau framework CSS lainnya.
6. Contoh Implementasi
Hero Section dengan Bootstrap
<section class="parallax"
data-speed="0.4"
data-image="<https://picsum.photos/id/1005/1600/900>">
<div class="container h-100 d-flex flex-column justify-content-center align-items-center text-white">
<h1 class="display-3 fw-bold text-center">Welcome to My Site</h1>
<p class="lead text-center">Bootstrap Hero with Parallax Effect</p>
<a href="#content" class="btn btn-primary btn-lg mt-3">Explore More</a>
</div>
</section>
Multiple Section Parallax
<div class="parallax"
data-speed="0.2"
data-image="<https://picsum.photos/id/1022/1200/800>"
data-height="80vh">
<h2>Section One</h2>
</div>
<div style="height: 500px; background: #eee; padding: 2rem;">
<p>Regular content...</p>
</div>
<div class="parallax"
data-speed="0.5"
data-image="<https://picsum.photos/id/1043/1200/800>">
<h2>Section Two</h2>
</div>
Contoh Kode Lengkap
Full kode bisa cek disini
Kesimpulan
Mudah digunakan: cukup tambahkan class
.parallaxdan atributdata-*.Responsif: bekerja dengan framework CSS populer.
Customizable: atur
data-speeddandata-heightsesuai kebutuhan.
Artikel Terkait
Best Practices Pengembangan Proyek Python dengan .env dan Dotenv
Pelajari cara mengelola konfigurasi proyek Python Anda dengan .env dan dotenv untuk pengembangan yang lebih efisien.
Cara Membuat Animasi Scrollspy dengan Library Scrollspy-js
Pelajari cara mudah membuat animasi scrollspy menggunakan library Scrollspy-js untuk halaman web yang lebih interaktif.
Panduan Lengkap Menginstall SASS di Windows
Pelajari langkah-langkah mudah untuk menginstall SASS di Windowsdengan panduan ini.