LÀM THẾ NÀO ĐỂ - 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
Di chuyển thị sai là xu hướng trang web trong đó nội dung nền (tức là hình ảnh) được di chuyển với tốc độ khác với nội dung nền trước khi cuộn. Nhấp vào các liên kết bên dưới để xem sự khác biệt giữa trang web có và không có thao tác cuộn thị sai.
Demo mà không cần cuộn thị sai
Lưu ý: Tính năng di chuyể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 với chiều cao cụ thể. Sau đó, sử dụng 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>
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 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;
}
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 truy vấn phương tiện để tắt hiệu ứng thị sai cho thiết bị di động:
Thí 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;
}
}