Khung xương html

Trang khung là một xu hướng lớn trong lĩnh vực UX. Sử dụng CSS Grid để tạo bố cục trang, sẽ thực tế hơn khi làm việc với các thành phần cần lặp lại động

Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari

Đáp ứng. có

Phụ thuộc. -

background với màu xám nhạt

Skeleton Loader BackgroundThiết kế một gradient

Triển khai Gradient

A. Tạo một phần, khoảng cách để thêm móc và gán một lớp “skeleton-loader-gradient” để tạo kiểu gradient

B. Chỉ định hướng và mẫu của linear-gradient. Ở đây, gradient sẽ được áp dụng từ trái sang phải. Nó bao gồm màu trắng với độ mờ 0% [trong suốt] ở phần đầu, độ mờ 50% ở giữa và độ mờ 80% ở cuối. Ngoài ra, nền chứa hai giá trị được phân tách bằng dấu phẩy. Theo thông số kỹ thuật, các giá trị được xếp chồng lên nhau theo chiều dọc. Giá trị đầu tiên vẫn ở trên cùng và giá trị khác đi xuống từ đó

C. Lặp lại gradient theo chiều dọc i. e. trên trục Y

D. Chỉ định kích thước của gradient i. e. chiều rộng và chiều cao

E. Đặt vị trí của gradient để bắt đầu i. e. 0 0

Skeleton Loader GradientAnimate gradient

Chuyển động đóng vai trò quan trọng trong các ứng dụng. Nó có thể giúp làm cho giao diện biểu cảm và trực quan hơn. Đối với bộ tải khung, chúng ta phải tạo hiệu ứng chuyển màu từ đầu bên trái nhất về phía bên phải

Khi nghĩ về chuyển động, chúng ta nên nhắm đến một khoảng thời gian thích hợp. Nếu nó chậm, nó khiến người dùng cảm thấy họ đang chờ đợi nhiều hơn thực tế. Nếu nó khá nhanh, nó mang lại một nhận thức xấu
Chúng tôi phải giữ sự cân bằng phù hợp giữa tốc độ, hướng và độ giãn để mang lại trải nghiệm hiệu quả

Chúng tôi có một nền màu xám nhạt và độ dốc được thiết kế. Tiếp theo, chúng ta phải tạo hiệu ứng chuyển màu từ trái sang phải, lặp đi lặp lại một cách dễ dàng

Thực hiện hoạt hình

A. Tạo một phần, khoảng cách để thêm móc và chỉ định một lớp "bộ tải khung" để tạo kiểu gradient

B. Chỉ định độ dốc và nền màu xám nhạt cho trình tải

C. Chỉ định tên animation, thời lượng và số lần lặp lại

D. Sử dụng quy tắc keyframes, chỉ định cách hoạt ảnh sẽ dần dần thay đổi từ kiểu hiện tại sang kiểu mới vào những thời điểm nhất định. Tại đây, nó sẽ thay đổi vị trí nền từ trái sang phải [0 đến 100%]

Skeleton Loader AnimationHiển thị trình tải chỉ dành cho trình giữ chỗ trống

A. Bộ chọn :empty khớp với mọi phần tử không có phần tử con hoặc nút văn bản. Tại đây, nó sẽ chỉ hiển thị bộ tải khung khi nội dung chưa được tải

hoàn thành thực hiện

Skeleton Loader — Thực hiện đầy đủ

Ở đây, chúng tôi đã thiết kế ô sản phẩm chứa hình ảnh, tên sản phẩm và mô tả sản phẩm. Chúng tôi đang tìm nạp nội dung thông qua API trực tiếp bằng JavaScript

A. DOMContentLoaded sẽ bị kích hoạt khi tải HTML DOM. Chúng tôi sẽ thực hiện các thao tác JavaScript khi nhận được sự kiện này

B. Truy cập các phần tử thông qua HTML DOM API

C. Lấy dữ liệu từ API trực tiếp. Ở đây, chúng tôi đang sử dụng API giả để tìm nạp chi tiết sản phẩm [https. // fakestoreapi. com/sản phẩm/1]

D. Điền vào các phần tử HTML với nội dung phù hợp

Skeleton Loader — Trực quan

Bạn cũng có thể xem video của tôi mô tả thiết kế Skeleton Loader theo các bước được đề cập ở trên

dòng dưới cùng

Khi làm việc với hoạt ảnh, thoạt nhìn có vẻ đòi hỏi khắt khe. Tuy nhiên, việc triển khai chúng không quá khó so với trải nghiệm mà nó mang lại

Khung HTML là gì?

Bộ xương trong HTML và CSS là gì?

CSS khung được sử dụng để làm gì?

Bootstrap bộ xương là gì?