Bagaimana membuat: parallax scrolling

Belajar cara menggunakan CSS untuk membuat efek scrolling 'parallax'.

Parallax scrolling

Parallax scrolling adalah tren desain situs web dimana konten latar (misalnya gambar) bergerak dengan kecepatan yang berbeda saat menggulir. Klik tautan di bawah ini untuk melihat perbedaan antara situs web dengan dan tanpa parallax scrolling.

Demo dengan efek gerak parallax

Demo tanpa efek gerak parallax

Perhatian:efek gerak parallax tidak selalu berfungsi di perangkat bergerak / ponsel. Namun, Anda dapat menonaktifkan efek ini di perangkat bergerak menggunakan media query (lihat contoh terakhir di halaman ini).

Cara membuat efek gerak parallax

Gunakan elemen kontainer, dan tambahkan gambar latar belakang dengan tinggi tertentu ke kontainer. kemudian, gunakan background-attachment: fixed membuat efek gerak parallax nyata. Properti latar belakang lain digunakan untuk menengah dan mengukur gambar dengan sempurna:

contoh dalam piksel

<style>
.parallax {
  /* Gambar yang digunakan */
  background-image: url("img_parallax.jpg");
  /* Tetapkan tinggi tertentu */
  min-height: 500px;
  /* Buat efek gerak parallax */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
/* Element kontainer -->
<div class="parallax"></div>

Coba sendiri

Pada contoh di atas, tinggi gambar diatur menggunakan piksel. Jika Anda ingin menggunakan persen, seperti 100%, untuk membuat gambar memenuhi layar penuh, atur tinggi kontainer parallax menjadi 100%. Perhatian: Anda juga harus mengubah height: 100% terapkan untuk <html> dan <body>:

contoh dalam persen

body, html {
  height: 100%;
}
.parallax {
  /* Gambar yang digunakan */
  background-image: url("img_parallax.jpg");
  /* Panjang penuh */
  height: 100%;
  /* Buat efek gerak parallax */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Coba sendiri

Beberapa perangkat bergerak menggunakan background-attachment: fixed akan muncul masalah. Namun, Anda dapat menonaktifkan efek gerak parallax di perangkat bergerak menggunakan media query:

contoh

/* Matikan semua efek gerak parallax untuk tablet dan ponsel. Jika diperlukan, tambahkan/kurangi piksel */
@media only screen and (max-device-width: 1366px) {
  .parallax {
    background-attachment: scroll;
  }
}

Coba sendiri

Dalam kode di atas, saat lebar layar kurang dari atau sama dengan 1366 piksel, efek gerak parallax akan dimatikan, yang sesuai untuk sebagian besar ponsel dan tablet. Ini dilakukan dengan mengubah .parallax kelas background-attachment properti dari tetap ke scroll Dengan demikian, gambar latar akan menggulir bersama dengan bagian lain halaman, bukan tetap di dalam tampilan.