Bagaimana caranya - Pengguliran Paralaks
Pelajari cara membuat efek gulir "paralaks" dengan CSS.
paralaks
Pengguliran paralaks adalah tren situs web di mana konten latar belakang (yaitu gambar) dipindahkan pada kecepatan yang berbeda dari konten latar depan saat menggulir. Klik tautan di bawah untuk melihat perbedaan antara situs web dengan dan tanpa pengguliran paralaks.
Demo dengan pengguliran paralaks
Demo tanpa pengguliran paralaks
Catatan: Pengguliran paralaks tidak selalu berfungsi pada perangkat seluler/ponsel pintar. Namun, Anda dapat menggunakan kueri media untuk menonaktifkan efek pada perangkat seluler (lihat contoh terakhir di halaman ini).
Cara Membuat Efek Pengguliran Paralaks
Gunakan elemen wadah dan tambahkan gambar latar belakang ke wadah dengan ketinggian tertentu. Kemudian gunakan background-attachment: fixed
untuk membuat efek paralaks yang sebenarnya. Properti latar belakang lainnya digunakan untuk memusatkan dan menskalakan gambar dengan sempurna:
Contoh dengan piksel
<style>
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Set
a specific height */
min-height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position:
center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<!-- Container element
-->
<div class="parallax"></div>
Contoh di atas menggunakan piksel untuk mengatur ketinggian gambar. Jika Anda ingin menggunakan persen, misalnya 100%, untuk membuat gambar sesuai dengan seluruh layar, atur ketinggian wadah paralaks menjadi 100%. Catatan: Anda juga harus mendaftar height: 100%
ke <html> dan <body>:
Contoh dengan persen
body, html {
height: 100%;
}
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Full height */
height: 100%;
/* Create the parallax
scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat:
no-repeat;
background-size: cover;
}
Beberapa perangkat seluler bermasalah dengan background-attachment: fixed
. Namun, Anda dapat menggunakan kueri media untuk menonaktifkan efek paralaks untuk perangkat seluler:
Contoh
/* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if
needed */
@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}