Cách thực hiện - Di chuyển thị sai
Tìm hiểu cách tạo hiệu ứng cuộn "thị sai" bằng CSS.
Thị sai
Cuộn thị sai là một xu hướng trang web trong đó nội dung nền (tức là hình ảnh) được di chuyển ở tốc độ khác với nội dung nền trước trong khi cuộn. Nhấp vào các liên kết bên dưới để thấy sự khác biệt giữa một trang web có và không có cuộn thị sai.
Bản trình diễn không có cuộn thị sai
Lưu ý: Tính năng cuộn thị sai không phải lúc nào cũng hoạt động trên thiết bị di động/điện thoại thông minh. Tuy nhiên, bạn có thể sử dụng truy vấn phương tiệ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 cuộn thị sai
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 tệp background-attachment: fixed
để tạo hiệu ứng thị sai thực tế. 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 một cách hoàn hảo:
Ví dụ với pixel
<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>
Hãy tự mình thử » 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ị sai thành 100%. Lưu ý: Bạn cũng phải áp dụng height: 100%
cho cả <html> và <body>:
Ví dụ với phần trăm
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;
}
Hãy tự mình thử » 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 thị sai cho thiết bị di động:
Ví dụ
/* 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;
}
}
Hãy tự mình thử »