Cara membuat: Parallax scrolling

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

Parallax scrolling

Parallax scrolling adalah tren desain laman web di mana kecepatan gerakan konten latar (seperti gambar) berbeda dengan konten latar depan saat menggulir.

Demos dengan kesan gerakan parallax

Demos tanpa kesan gerakan parallax

Perhatian:Kesan gerakan parallax bukan selalu berkesan di peranti siaran/telefon pintar. Tetapi, anda boleh menggunakan kutip media untuk menutup kesan ini di peranti siaran (lihat contoh terakhir di halaman ini).

Bagaimana untuk membuat kesan gerakan parallax

Gunakan element wadah, dan tambahkan gambar latar belakang dengan ketinggian tertentu ke wadah itu. kemudian, gunakan background-attachment: fixed Membuat kesan gerakan parallax sebenar. Lain-lain properti latar belakang digunakan untuk menengahkan dan menyesuaikan skala gambar:

contoh dengan satuan piksel

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

Cuba sendiri

Contoh di atas menggunakan piksel untuk menetapkan ketinggian gambar. Jika anda mahu menggunakan persen, seperti 100%, untuk membuat gambar menyesuaikan skrin penuh, atur ketinggian wadah parallax kepada 100%. Perhatian: anda juga mesti height: 100% Dipergunakan untuk <html> dan <body>:

contoh dengan satuan persen

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

Cuba sendiri

Beberapa peranti siaran menggunakan background-attachment: fixed akan muncul masalah. Tetapi, anda boleh menggunakan kutip media untuk menutup kesan parallax di peranti siaran:

contoh

/* Menutup kesan gerakan parallax untuk semua tablet dan telefon. Jika perlu, boleh tambah/turun piksel */
@media only screen and (max-device-width: 1366px) {
  .parallax {
    background-attachment: scroll;
  }
}

Cuba sendiri

Dalam kod di atas, apabila lebar skrin mengurang atau sama dengan 1366 piksel, kesan gerakan parallax akan ditutup, ini sesuai untuk kebanyakan tablet dan telefon. Ini dicapai dengan mengubah .parallax kelas background-attachment sifat daripada tetap 到 scroll 来实现的。这样，背景图像就会随着页面的其余部分一起滚动，而不是固定在视口中。