Cách tạo hiệu ứng Parallax Scrolling cực đơn giản với CSS

Xuất bản: 25/6/2024

Parallax Scrolling là một xu hướng trang web trong đó hình nền được di chuyển ở tốc độ khác với nội dung nền trước trong khi cuộn. Bạn có thể xem demo hiệu ứng TẠI ĐÂY

> ❗Lưu ý: Tính năng Parallax Scrolling không phải lúc nào cũng hoạt động trên thiết bị di động. Tuy nhiên, bạn có thể sử dụng truy vấn để tắt hiệu ứng trên thiết bị di động (xem ví dụ cuối cùng trên trang này)

Cách tạo hiệu ứng Parallax Scrolling

Sử dụng phần tử vùng chứa và thêm hình nền vào vùng chứa có chiều cao cụ thể. Sau đó sử dụng background-attachment: fixed để tạo hiệu ứng. Các thuộc tính nền khác được sử dụng để căn giữa và chia tỷ lệ hình ảnh:

<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>

Ví dụ trên sử dụng pixel để đặt chiều cao của hình ảnh. Nếu bạn muốn sử dụng phần trăm, chẳng hạn như 100%, để làm cho hình ảnh vừa với toàn bộ màn hình, hãy đặt chiều cao của vùng chứa thành 100%. Lưu ý: Bạn cũng phải áp dụng height: 100% cho cả <html> và <body>:

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;
}

Một số thiết bị di động gặp sự cố với background-attachment: fixed. Tuy nhiên, bạn có thể sử dụng media Query để tắt hiệu ứng cho thiết bị di động:

/* 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;
  }
}