Giới thiệu
Bằng cách chỉ định tốc độ khác nhau cho nền và nội dung tiền cảnh, chúng ta có thể tạo hiệu ứng cuộn parallax (hiệu ứng thị差) bằng CSS.
Ví dụ
Ví dụ sau cho thấy hiệu ứng parallax scrolling CSS:
<!DOCTYPE html>
<html>
<head>
<style>
body, html {
height: 100%;
text-align: center;
}
.example {
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#demo {
background: url("https://images.unsplash.com/photo-1612698565524-1101522e9a21?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixlib=rb1.2.1&q=80&w=800");
}
#dist {
height:150px;
background-color: rgba(102,234,99,0.5);
padding: 2%;
}
#d2 {
background: url("https://images.unsplash.com/photo-1611489473774-5d881f1153f1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixlib=rb1.2.1&q=80&w=800");
}
</style>
</head>
<body>
<div id="demo" class="example"></div>
<div id="dist"> Sed a porttitor enim. Integer euismod dui massa, at posuere sem fermentum at. Fusce vehicula fringilla tortor, ut mattis sapien tristique ac. Phasellus eleifend malesuada orci, et facilisis arcu egestas vel. Duis in tempus libero. Nunc nibh arcu, tempus quis lectus ut, blandit tincidunt felis. Suspendisse potenti. </div>
<div id="d2" class="example"></div>
</body>
</html>
Kết quả
Đoạn mã trên sẽ cho kết quả sau:
