Cách tạo: Chuyển động视差
- Trang trước Bảng giá
- Trang tiếp theo Tỷ lệ rộng cao
Học cách sử dụng CSS để tạo hiệu ứng cuộn视差.
Chuyển động视差
Chuyển động视差 là một xu hướng thiết kế trang web, nơi nội dung nền (ví dụ: hình ảnh) di chuyển với tốc độ khác nhau so với nội dung tiền cảnh khi cuộn. Nhấp vào liên kết dưới đây để xem sự khác biệt giữa các trang web có và không có chuyển động视差.
Giải thích không có hiệu ứng cuộn视差
Lưu ý:hiệu ứng cuộn视差 không phải lúc nào cũng hoạt động trên thiết bị di động/thiết bị di động. Tuy nhiên, bạn có thể tắt hiệu ứng này trên thiết bị di động bằng cách sử dụng truy vấn truyền thông (xem ví dụ cuối trang này).
cách tạo hiệu ứng cuộn视差
sử dụng một yếu tố khay và thêm một bức ảnh nền có chiều cao cụ thể vào khay. Sau đó, sử dụng background-attachment: fixed tạo ra hiệu ứng cuộn视差 thực tế. Các thuộc tính nền khác được sử dụng để đặt chính giữa và phóng to hoàn hảo ảnh:
ví dụ theo đơn vị pixel
<style>
.parallax {
/* Ảnh được sử dụng */
background-image: url("img_parallax.jpg");
/* Thiết lập chiều cao cụ thể */
min-height: 500px;
/* Tạo hiệu ứng cuộn视差 */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
/* Element khay */
<div class="parallax"></div>
ví dụ trên sử dụng pixel để thiết lập chiều cao của ảnh. Nếu bạn muốn sử dụng phần trăm, ví dụ 100%, để làm cho ảnh phù hợp với toàn bộ màn hình, hãy thiết lập chiều cao của khay视差 thành 100%. Lưu ý: Bạn cũng phải thiết lập height: 100% áp dụng cho <html> và <body>:
ví dụ theo đơn vị phần trăm
body, html {
height: 100%;
}
.parallax {
/* Ảnh được sử dụng */
background-image: url("img_parallax.jpg");
/* Cao độ đầy đủ */
height: 100%;
/* Tạo hiệu ứng cuộn视差 */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
một số thiết bị di động khi sử dụng background-attachment: fixed sẽ xuất hiện vấn đề. Tuy nhiên, bạn có thể tắt hiệu ứng cuộn视差 trên thiết bị di động bằng cách sử dụng truy vấn truyền thông:
một số ví dụ
/* Tắt tất cả hiệu ứng cuộn视差 trên các máy tính bảng và điện thoại. Nếu cần, có thể tăng/giảm pixel */
@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
Trong đoạn mã trên, khi độ rộng màn hình nhỏ hơn hoặc bằng 1366 pixel, hiệu ứng cuộn视差 sẽ bị tắt, điều này phù hợp với hầu hết các máy tính bảng và điện thoại. Điều này được thực hiện bằng cách thay đổi .parallax của lớp background-attachment thuộc tính từ fixed đến scroll Để thực hiện điều này, hình ảnh nền sẽ cuộn cùng với phần còn lại của trang, thay vì cố định trong khung nhìn.
- Trang trước Bảng giá
- Trang tiếp theo Tỷ lệ rộng cao
