Cara Membuat Efek Parallax dengan HTML dan CSS

Parallax adalah efek di mana latar belakang tetap diam, sementara elemen lain di atasnya bisa bergerak saat pengguna menggulir halaman.

Efek ini sering digunakan dalam hero section untuk membuat tampilan website lebih modern dan menarik.

Mengapa menggunakan Bootstrap? Kita menggunakan Bootstrap 5.3 karena memudahkan pengaturan tata letak dan styling tanpa banyak kode tambahan.

1️⃣ Struktur Halaman Dasar

Berikut adalah struktur dasar halaman yang siap untuk efek parallax:

index.html

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Parallax Effect</title>
    <link href="<https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css>" rel="stylesheet">
    <style rel="stylesheet" href="style.css"></style>
</head>
<body>

    <!-- Section dengan Efek Parallax -->
    <section class="parallax d-flex align-items-center text-center">
        <div class="container text-white">
            <h1>Efek Parallax</h1>
            <p>Teks ini berada di atas efek parallax.</p>
            <a href="#" class="btn btn-primary">Lihat Selengkapnya</a>
        </div>
    </section>

    <!-- Konten Biasa -->
    <section class="container py-5">
        <h2>Apa Itu Parallax?</h2>
        <p>Efek parallax membuat tampilan website lebih interaktif dengan latar belakang yang tetap diam saat pengguna menggulir halaman.</p>
    </section>

</body>
</html>

style.css

.parallax {
    background-image: url('<https://images.pexels.com/photos/2325447/pexels-photo-2325447.jpeg>'); /* Gambar latar */
    height: 100vh; /* Setinggi layar penuh */
    background-attachment: fixed; /* Efek Parallax */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

2️⃣ Cara Kerja Efek Parallax dalam Kode Ini

🖼️ 1. Latar Belakang dengan Efek Parallax (CSS)

.parallax {
    background-image: url('<https://images.pexels.com/photos/2325447/pexels-photo-2325447.jpeg>'); /* Gambar latar */
    height: 100vh; /* Setinggi layar penuh */
    background-attachment: fixed; /* Efek Parallax */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

🔹 Gambar dapat diganti dengan gambar sendiri, misalnya dari folder assets:

background-image: url('assets/pemandangan');

🔹background-attachment: fixed; → Ini yang membuat efek parallax terjadi.

🔹height: 100vh; → Supaya bagian ini selalu setinggi layar penuh.

🔹background-size: cover; → Agar gambar memenuhi seluruh area.

📌 2. Menampilkan Teks di Atas Latar Belakang

<section class="parallax d-flex align-items-center text-center">
    <div class="container text-white">
        <h1>Efek Parallax</h1>
        <p>Teks ini berada di atas efek parallax.</p>
        <a href="#" class="btn btn-primary">Lihat Selengkapnya</a>
    </div>
</section>

🔹 d-flex align-items-center → Agar teks berada di tengah vertikal.

🔹 text-center → Agar teks berada di tengah horizontal.

🔹 text-white → Agar teks berwarna putih supaya terbaca di atas gambar.

3️⃣ Tambahkan Konten Biasa di Bawahnya

<section class="container py-5">
    <h2>Apa Itu Parallax?</h2>
    <p>Efek parallax membuat tampilan website lebih interaktif dengan latar belakang yang tetap diam saat pengguna menggulir halaman.</p>
</section>