GALAXY TECH
Chuyên gia Công nghệ
Thứ hai, 03/08/2020 | 00:00 GMT+7

Cách tạo hiệu ứng cuộn thị sai với CSS thuần túy trong Chrome

CSS hiện đại là một công cụ mạnh mẽ mà bạn có thể sử dụng để tạo nhiều tính năng Giao diện user (UI) nâng cao. Trong quá khứ, các tính năng này dựa trên các thư viện JavaScript.

Trong hướng dẫn này, bạn sẽ cài đặt một vài dòng CSS để tạo hiệu ứng thị sai cuộn trên trang web. Bạn sẽ sử dụng hình ảnh từ placekitten.com làm hình nền trình giữ chỗ.

Bạn sẽ có một trang web với hiệu ứng thị sai cuộn CSS thuần túy sau khi bạn hoàn thành hướng dẫn.

Cảnh báo : Bài viết này sử dụng các thuộc tính CSS thử nghiệm không hoạt động trên các trình duyệt. Dự án này đã được thử nghiệm và hoạt động trên Chrome.
Kỹ thuật này không hoạt động tốt trên Firefox, Safari và iOS do một số tối ưu hóa của các trình duyệt đó.

Bước 1 - Tạo một dự án mới

Trong bước này, sử dụng dòng lệnh để cài đặt một folder và file dự án mới. Để bắt đầu, hãy mở terminal của bạn và tạo một folder dự án mới.

Gõ lệnh sau để tạo folder dự án:

  • mkdir css-parallax

Trong trường hợp này, bạn đã gọi folder là css-parallax . Bây giờ, hãy thay đổi vào folder css-parallax :

  • cd css-parallax

Tiếp theo, tạo index.html trong folder css-parallax của bạn bằng lệnh nano :

  • nano index.html

Bạn sẽ đặt tất cả HTML cho dự án trong file này.

Trong bước tiếp theo, bạn sẽ bắt đầu tạo cấu trúc của trang web.

Bước 2 - Cài đặt cấu trúc ứng dụng

Trong bước này, bạn sẽ thêm HTML cần thiết để tạo cấu trúc của dự án.

Bên trong index.html của bạn, hãy thêm mã sau:

css-parallax / index.html
 <!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <title>CSS Scrolling Parallax</title>   </head>   <body></body> </html>

Đây là cấu trúc cơ bản của hầu hết các trang web sử dụng HTML .

Thêm mã sau vào trong <body> :

css-parallax / index.html
  <body> ...    <main>       <section class="section parallax bg1">          <h1>Cute Kitten</h1>       </section>       <section class="section static">          <h1>Boring</h1>       </section>       <section class="section parallax bg2">          <h1>Fluffy Kitten</h1>       </section>    </main> ... </body>

Mã này tạo ra ba phần khác nhau. Hai sẽ có hình nền và một sẽ là nền tĩnh, đơn giản.

Trong một vài bước tiếp theo, bạn sẽ thêm các kiểu cho từng phần bằng cách sử dụng các lớp bạn đã thêm trong HTML .

Bước 3 - Tạo file CSS và thêm CSS ban đầu

Trong bước này, bạn sẽ tạo một CSS . Sau đó, bạn sẽ thêm CSS ban đầu cần thiết để tạo kiểu cho trang web và tạo hiệu ứng thị sai.

Đầu tiên, tạo file styles.css trong folder css-parallax của bạn bằng lệnh nano :

  • nano styles.css

Đây là nơi bạn sẽ đặt tất cả CSS cần thiết để tạo hiệu ứng cuộn thị sai.

Tiếp theo, bắt đầu với lớp .wrapper . Bên trong file styles.css của bạn, hãy thêm mã sau:

css-parallax / styles.css
 .wrapper {   height: 100vh;   overflow-x: hidden;   overflow-y: auto;   perspective: 2px; }

Lớp .wrapper đặt các thuộc tính phối cảnh và cuộn cho toàn bộ trang.

Chiều cao của shell bọc cần được đặt thành giá trị cố định để hiệu ứng hoạt động. Bạn có thể sử dụng đơn vị khung nhìn vh được đặt thành 100 để có được chiều cao đầy đủ của khung nhìn của màn hình.

Khi bạn chia tỷ lệ hình ảnh, chúng sẽ thêm thanh cuộn ngang vào màn hình, vì vậy bạn có thể tắt nó bằng cách thêm overflow-x: hidden; . Thuộc tính perspective mô phỏng khoảng cách từ khung nhìn đến các phần tử giả mà bạn sẽ tạo và chuyển đổi sâu hơn trong CSS .

Trong bước tiếp theo, bạn sẽ thêm nhiều CSS để tạo kiểu cho trang web của bạn .

Bước 4 - Thêm kiểu cho lớp .section

Trong bước này, bạn sẽ thêm các kiểu vào lớp .section .

Bên trong file styles.css của bạn, hãy thêm mã sau vào bên dưới lớp shell bọc:

css-parallax / styles.css
 .wrapper {   height: 100vh;   overflow-x: hidden;   perspective: 2px; } .section {    position: relative;   height: 100vh;   display: flex;   align-items: center;   justify-content: center;   color: white;   text-shadow: 0 0 5px #000; }

Lớp .section xác định kích thước, hiển thị và các thuộc tính văn bản cho các phần chính.

Đặt một vị trí relative để phần tử con, .parallax::after có thể được định vị tuyệt đối so với phần tử mẹ .section .

Mỗi phần có view-height(vh) là 100 để chiếm hết chiều cao của khung nhìn. Giá trị này có thể được thay đổi và đặt thành bất kỳ chiều cao nào bạn muốn cho mỗi phần.

Cuối cùng, các thuộc tính CSS còn lại được sử dụng để định dạng và thêm kiểu dáng cho văn bản bên trong mỗi phần. Nó đặt văn bản ở giữa mỗi phần và thêm màu white .

Tiếp theo, bạn sẽ thêm một phần tử giả và tạo kiểu cho nó để tạo hiệu ứng thị sai trên hai trong số các phần trong HTML của bạn.

Bước 5 - Thêm kiểu cho lớp .parallax

Trong bước này, bạn sẽ thêm các kiểu vào lớp .parallax .

Đầu tiên, bạn sẽ thêm một phần tử giả trên lớp .parallax để được tạo kiểu.

Lưu ý: Bạn có thể truy cập tài liệu web MDN để tìm hiểu thêm về phần tử giả CSS.

Thêm mã sau vào bên dưới lớp .section :

css-parallax / styles.css
...  .section {   position: relative;   height: 100vh;   display: flex;   align-items: center;   justify-content: center;   color: white;   text-shadow: 0 0 5px #000; }  .parallax::after {   content: " ";   position: absolute;   top: 0;   right: 0;   bottom: 0;   left: 0;   transform: translateZ(-1px) scale(1.5);   background-size: 100%;   z-index: -1; } ...

Lớp .parallax thêm phần tử giả ::after vào hình nền và cung cấp các biến đổi cần thiết cho hiệu ứng thị sai.

Phần tử giả là phần tử con cuối cùng của phần tử có lớp .parallax .

Nửa đầu của mã hiển thị và định vị phần tử psuedo. Thuộc tính transform di chuyển phần tử giả trở lại máy ảnh trên z-index , sau đó điều chỉnh tỷ lệ nó trở lại để lấp đầy khung nhìn.

Vì phần tử giả ở xa hơn, nó dường như di chuyển chậm hơn.

Trong bước tiếp theo, bạn sẽ thêm vào các hình nền và phong cách nền tĩnh.

Bước 6 - Thêm hình ảnh và nền cho từng phần

Trong bước này, bạn sẽ thêm các thuộc tính CSS cuối cùng để thêm vào hình nền và màu nền của phần tĩnh.

Đầu tiên, thêm màu nền đồng nhất vào phần .static với đoạn mã sau .parallax::after class:

css-parallax / styles.css
...  .parallax::after {   content: " ";   position: absolute;   top: 0;   right: 0;   bottom: 0;   left: 0;   transform: translateZ(-1px) scale(1.5);   background-size: 100%;   z-index: -1; }  .static {   background: red; } ...

Lớp .static thêm nền cho phần tĩnh không có hình ảnh.

Hai phần có lớp .parallax cũng có một lớp bổ sung khác nhau cho mỗi phần. Sử dụng các .bg1 và .bg2 để thêm hình nền Kitten.

Thêm mã sau vào lớp .static :

css-parallax / styles.css
...  .static {   background: red; } .bg1::after {   background-image: url('https://placekitten.com/g/900/700'); }  .bg2::after {   background-image: url('https://placekitten.com/g/800/600'); }  ...

Các .bg1, .bg2 thêm các hình nền tương ứng cho mỗi phần.

Các hình ảnh từ trang web placekitten . Đây là một dịch vụ lấy ảnh mèo con để sử dụng làm trình giữ chỗ.

Bây giờ, tất cả mã cho hiệu ứng cuộn thị sai đã được thêm vào, bạn có thể liên kết đến file styles.css trong index.html của bạn .

Bước 7 - Liên kết styles.css và Mở index.html trong Trình duyệt của bạn

Trong bước này, bạn sẽ liên kết file styles.css của bạn và mở dự án trong trình duyệt của bạn để xem hiệu ứng cuộn thị sai.

Trước tiên, hãy thêm mã sau vào <head> trong index.html :

css-parallax / index.html
 ... <head>   <meta charset="UTF-8" />   <^>   <link rel="stylesheet" href="styles.css" />   <^>   <meta name="viewport" content="width=device-width, initial-scale=1.0" />   <title>CSS Parallax</title> </head>  ...

Bây giờ, bạn có thể mở index.html trong trình duyệt của bạn :

Hiệu ứng thị sai cuộn gif

Như vậy, bạn đã cài đặt một trang web hoạt động với hiệu ứng cuộn. Kiểm tra kho lưu trữ GitHub này để xem mã đầy đủ.

Kết luận

Trong bài viết này, bạn cài đặt một dự án với index.html và styles.css và bây giờ có một trang web chức năng. Bạn đã thêm vào cấu trúc trang web của bạn và tạo kiểu cho các phần khác nhau trên trang web.

Có thể đặt hình ảnh bạn sử dụng hoặc hiệu ứng thị sai ra xa hơn để chúng di chuyển chậm hơn. Bạn sẽ phải thay đổi số lượng pixel trên perspective và các thuộc tính transform . Nếu bạn không muốn hình nền cuộn, hãy sử dụng background-attachment: fixed; thay vì perspective/translate/scale .

Tags:

Các tin liên quan

Cách tạo trang đích có kiểu dáng với CSS Tailwind
2020-06-23
Triển khai một CSS thuần túy có thể thu gọn
2020-05-02
Căn giữa mọi thứ trong CSS bằng Flexbox
2020-05-02
Tham chiếu phông chữ hệ thống CSS
2020-03-29
Sử dụng Thuộc tính chiều cao dòng CSS để cải thiện khả năng đọc
2020-02-04
Cách sử dụng CSS: root Pseudo-Class Selector
2020-01-15
Khi nào bạn nên sử dụng quy tắc CSS! Important?
2020-01-14
Thủ thuật sử dụng CSS translateZ () và phối cảnh ()
2019-12-13
Cách hiển thị CSS trên server ứng dụng React
2019-12-12
Cách tạo Thư viện ảnh cuộn vô hạn với React và CSS Grid
2019-12-12