Kỹ thuật CSS
Đối với một nhà phát triển web, khi nói đến việc tạo hiệu ứng cuộn thị sai, có nhiều kỹ thuật khác nhau. Một trong những kỹ thuật như vậy là sử dụngCascaded Styling Sheets(CSS).
CSS giải thích cách các phần tử HTML được hiển thị trên màn hình. Người ta có thể tạo một tệp CSS và nó có thể được sử dụng cho trang web hoàn chỉnh. Việc thêm tệp CSS sẽ đơn giản hơn là thêm kiểu vào từng phần tử HTML và quản lý chúng trong các phần khác nhau của trang web.
Note- Một số phương pháp được thảo luận dưới đây trong chương này dành riêng cho máy tính để bàn và không dành cho thiết bị di động. Nó sẽ được đề cập trong các bước khi một kỹ thuật cụ thể không phù hợp với thiết bị di động.
Xem xét việc giảm tải CSS vào tất cả các bản vẽ bổ sung vào mô hình đối tượng tài liệu (DOM), có khả năng tăng tốc phần cứng và hiệu ứng mượt mà hơn mà không gây gánh nặng cho CPU.
Phương pháp vị trí tuyệt đối
Phương pháp này thường được sử dụng để tạo hiệu ứng thị sai, vì phương pháp này tương đối nhẹ so với các tùy chọn khác có sẵn. Vị trí của hình nền được giữ cố định so với nội dung khác trên màn hình. Trong ví dụ được thảo luận dưới đây, bạn sẽ thấy cách thực hiện điều đó bằng cách sử dụng sự kỳ diệu của CSS.
Trong phần này, chúng ta sẽ xem xét hai phương pháp cho Phương pháp Vị trí Tuyệt đối -
- Nền đơn
- Nhiều nền
Phương pháp nền đơn
Trong phương pháp này, chúng tôi sẽ tạo hai tệp trong cùng một thư mục. Tuân thủ các bước đưa ra dưới đây cho cùng một mục đích -
Step 1
Chúng ta phải tạo hai tệp trong cùng một thư mục: tệp đầu tiên có đánh dấu HTML và tệp thứ hai có mã CSS.
Step 2
Bây giờ, hãy để chúng tôi xác định đánh dấu HTML của chúng tôi. Hãy quan sát đoạn mã dưới đây -
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<div class = "BgContainer">
<div class = "Parallax">
<h1> Welcome! </h1>
</div>
<div class = "FgContainer">
<div class = "MainContent">
<p>
Here we will go ahead with some content which will really vary
according to the content on your site. I am just typing out this
content as it is sometimes good to engage user than the usual lorem
ipsum text!
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</body>
</html>
Step 3
Mở notepad. Sao chép và dán đoạn mã trên.
Khi bạn đang lưu tệp, dưới Save as type, lựa chọn All Files. Nhập tên cho tệp của bạn theo yêu cầu, nhưng phải theo sau tên đó là phần mở rộng -.html như thể hiện trong ảnh chụp màn hình bên dưới.
Step 4
Sau khi tệp được lưu, hãy tạo một tệp khác trong notepad và dán mã được cung cấp bên dưới -
html, body {
font-size: 18px;
line-height: 28px;
}
h1 {
letter-spacing: -15px;
color: white;
text-align: center;
font-size: 200px;
font-weight: 800;
line-height: 200px;
}
BgContainer {
perspective: 1px;
transform-style: preserve-3d;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
}
FgContainer {
position: relative;
display: block;
background-color: white;
z-index: 1;
}
MainContent {
max-width: 750px;
margin: 0 auto;
padding: 75px 0;
}
p {
margin: 75px 0;
}
.Parallax {
display: flex;
flex: 1 0 auto;
position: relative;
z-index: -1;
height: 100vh;
justify-content: center;
align-items: center;
transform: translateZ(-1px) scale(2);
background: url(https://cdn.pixabay.com/photo/2017/02/07/09/02/background-2045380_640.jpg);
background-color: rgb(250,228, 216);
}
Như bạn đã thấy ở bước trước, khi bạn đang lưu tệp, dưới Save as gõ, chọn All Files. Nhập tên cho tệp của bạn theo yêu cầu và thêm phần mở rộng.css với nó.
Phân tích mã
Hãy cho chúng tôi hiểu phần nào của mã chịu trách nhiệm về hiệu ứng thị sai. Hầu hết công việc quan trọng đối với thị sai được thực hiện bằng cách sử dụng các quy tắc phối cảnh và biến đổi. Tham khảoline 15trong đoạn mã trên. Phối cảnh được tạo ra choBgContainerĐầu tiên. Điều này bắt đầu một nền tảng cho quy tắc chuyển đổi.
bên trong Parallax container bắt đầu trên dòng 40, transform quy tắc trên dòng 48 đẩy div BgContainer vào nền bằng cách sử dụng dịch (-1px).
Bạn có thể sửa đổi các giá trị cho các tham số dịch và tỷ lệ để sửa đổi độ sâu của thị sai.
Khi bạn mở tệp html, hiệu ứng thị sai sẽ hiển thị như hình dưới đây:
Note - Đối với phần còn lại của hướng dẫn, người đọc sẽ giả định rằng người đọc có thể tạo các tệp HTML và CSS theo cấu trúc thư mục được cung cấp trong phương pháp trên.
Phương pháp nhiều nền
Trong phương pháp này, chúng ta sẽ có các hình ảnh khác nhau xuất hiện khi người dùng cuộn xuống trang. Có một hình ảnh bằng bút chì, được sử dụng với các kết hợp màu sắc khác nhau để minh họa hiệu ứng này.
Quan sát mã sau cho trang HTML như được hiển thị bên dưới:
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<h1>Multiple Background Example</h1>
<div class = "parallax">
<div class = "bg__First">First</div>
<div class = "bg__Second">Second</div>
<div class = "bg__Third">Third</div>
<div class = "bg__Fourth">Fourth</div>
</div>
</body>
</html>
Tương tự như ví dụ trước, chúng ta sẽ sử dụng styles.cssđược lưu trữ trên cùng một vị trí với tệp HTML này. Chúng tôi có ba div khác nhau được đặt tên là First, Second, Third và Four.
Mã CSS cho phép cuộn thị sai được cung cấp bên dưới:
body, html {
height : 100%;
font-family : sans-serif;
}
.parallax [class*="bg__"] {
position : relative;
height : 50vh;
text-indent : -9999px;
background-attachment : fixed;
background-position : top center;
background-size : cover;
}
.parallax [class*="bg__"]:nth-child( 2n) {
box-shadow : inset 0 0 1em #111;
}
.parallax .bg__First, .bg__Fourth {
height : 100vh;
}
.parallax .bg__First {
background-image : url("parallax0.png");
}
.parallax .bg__Second {
background-image : url("parallax1.png");
}
.parallax .bg__Third {
background-image : url("parallax2.png");
}
.parallax .bg__Fourth {
background-image : url("parallax1.png");
}
Ở đây, chúng tôi tạo hiệu ứng thị sai từ dòng 7, thuộc tính quan trọng ở đây là background-attachment:fixed.
Sử dụng thuộc tính này, hình ảnh đầu tiên có bút chì màu sẽ luôn ở trên cùng. Khi bạn cuộn xuống, các hình ảnh khác nhau như được mô tả từ dòng 28 sẽ bắt đầu hiển thị.
Kết quả là, bạn sẽ có thể thấy hiệu ứng thị sai như thể hiện trong gif bên dưới. Hình ảnh sau đây là ảnh chụp màn hình của ví dụ mà chúng tôi đã xem xét cho nhiều nền.
Thị sai CSS thuần túy
Hãy để chúng tôi kết hợp kiến thức từ hai phương pháp trước và tạo hiệu ứng Thị sai CSS thuần túy nâng cao.
Sự khác biệt sẽ là cách chúng tôi sắp xếp image phần tử và z-transformbất động sản. Giải thích về thuộc tính sẽ được cung cấp sau mã CSS.
Tạo tệp HTML với mã sau bằng phương pháp thông thường từ Notepad.
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<div class = "wrapParallax">
<div class = "parallax_one">
<img src = "https://cdn.pixabay.com/photo/2018/06/16/15/36/water-lily-3478924_640.jpg" alt = "">
</div>
<div class = "parallax_two">
<h1>Pure CSS Parllax Advanced Level</h1>
</div>
<div class = "parallax_three">
<img src = "https://cdn.pixabay.com/photo/2016/11/29/04/19/beach-1867285_640.jpg" alt = "">
</div>
</div>
</body>
</html>
Đối với tệp CSS, mã được cung cấp bên dưới:
body, html {
padding: 0;
margin: 0;
}
h1 {
color: blue;
text-align: center;
padding: 20px;
text-shadow: 0px 0px 10px #fffff;
}
img {
width:100vw;
height:100vh;
}
.wrapParallax {
perspective: 100px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.parallax_one {
transform: translateZ(-100px) scale(2)
}
.parallax_two {
z-index: 10;
transform: translateZ(-200px) scale(3)
}
.parallax_three {
margin-top: 100vh;
}
Phân tích mã
Chúng tôi đã cố định vị trí của lớp đầu tiên trong line 26 bằng cách sử dụng position:absolutebất động sản. Các vị trí cũng được mã hóa cứng thành 0.
Trong parallax_two, là lớp có tiêu đề, chúng tôi đã áp dụng z-index: 10để tạo hiệu ứng nổi cho tiêu đề. Lớpparallax_three được chuyển xuống dưới cùng bằng cách cung cấp thuộc tính margin-top.
Do đó, chúng ta có thể nâng cao mức độ phức tạp trong hiệu ứng Parallax.
Quan sát hiệu ứng như trong hình dưới đây.