Cách tạo hiệu ứng tải màn hình Skeleton trong HTML, CSS và JavaScript
Màn hình Skeleton là một phần không thể thiếu trong việc giữ chân du khách trong xu hướng thiết kế hiện đại. Họ tạo ra ảo tưởng về tốc độ và quản lý kỳ vọng của người dùng bằng cách thông báo cho họ về trạng thái nội dung của trang. Một trong những giải pháp cần thiết nhất nhưng được đánh giá thấp mà màn hình khung mang lại là sự trợ giúp của chúng trong việc tránh Dịch chuyển bố cục tích lũy (CLS), cho phép nội dung hiển thị tất cả cùng một lúc thay vì tuần tự khi tải.
Sẵn sàng làm cho giao diện của bạn trực quan và biểu cảm hơn bằng cách triển khai các màn hình khung trong các dự án của riêng bạn? Đây là cách để bắt đầu.
Mục Lục
Thiết kế bố cục trang web
Thiết kế bố cục trang web giúp bạn kết tinh những kỳ vọng của mình. Bạn nên đặt mục tiêu, xác định bố cục, thêm bất kỳ trang nào được yêu cầu và làm cho nó có thể truy cập và đáp ứng cho các kích thước màn hình khác nhau. Hiện tại, hãy xem xét một thiết kế đơn giản với ảnh bìa, ảnh hồ sơ, một chút văn bản và các nút gọi hành động.
Khi bạn đã soạn thảo thiết kế của bố cục, sử dụng giấy hoặc ứng dụng như Figma hoặc Adobe XD, đã đến lúc chuẩn bị cấu trúc HTML.
Xây dựng cấu trúc cơ bản
Tạo một tệp mới index.html và viết một số HTML cho bố cục bên trong
Ghi chú: Đừng quên liên kết các tệp CSS và JavaScript trong tiêu đề của index.html tập tin.
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Skeleton Screen Loading Effect</title>
</head>
<body>
<div class="profile-container">
<div class="profile-images">
<div class="cover-img skeleton">
<img src="./image/linkedin banner.jpg">
</div>
<div class="profile-img skeleton">
<img src="./image/user-profile.jpg" alt="Photo by Ian Dooley on Unsplash">
</div>
</div>
<div class="profile-text">
<h1 class="skeleton">John Doe</h1>
<p class="skeleton">Software Engineer @ Google || Full Stack Developer || Self Taught</p>
<h5 class="skeleton">Bengaluru, Karnataka, India • <a class="skeleton" href="/">Contact info</a></h5>
<p class="skeleton"><a class="skeleton" href="/">534 connections</a></p>
</div>
<div class="profile-cta">
<a class="message-btn skeleton" href="/">Message</a>
<a class="more-btn skeleton" href="/">More</a>
</div>
</div>
<script src="script.js"></script>
</body>
Bắt đầu tạo kiểu cho trang của bạn
Áp dụng các thuộc tính CSS cơ bản như lề, font-family, và màu sắc Trên khắp cơ thể.
body {
margin: 0;
font-family: Arial;
color: rgba(255, 255, 255, 0.9);
}
Thêm hiệu ứng tải
Để thêm hiệu ứng tải, hãy thêm một ::sau phần tử giả cho lớp khung di chuyển từ trái (-100%) sang phải (100%) trong một hoặc hai giây, dẫn đến hoạt ảnh lung linh.
.skeleton {
position: relative;
width: max-content;
overflow: hidden;
border-radius: 4px;
background-color: #1e2226 !important;
color: transparent !important;
border-color: #1e2226 !important;
user-select: none;
cursor: default;
}.skeleton img {
opacity: 0;
}
.skeleton::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateX(-100%);
background-image: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0,
rgba(255, 255, 255, 0.2) 20%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0)
);
animation: shimmer 2s infinite;
content: '';
}
@keyframes shimmer {
100% {
transform: translateX(100%);
}
}
Tạo kiểu cho hình ảnh
Bây giờ, hãy tạo kiểu cho hồ sơ và ảnh bìa. Đừng quên đặt tràn: ẩn; để tránh bất kỳ mâu thuẫn nào.
img {
width: 100%;
vertical-align: middle;
}.profile-container {
width: 95%;
max-width: 780px;
margin: 0 auto;
border-radius: 8px;
margin-top: 32px;
background-color: #1e2226;
overflow: hidden;
position: relative;
}
.cover-img {
width: 100%;
overflow: hidden;
background-color: #1e2226;
aspect-ratio: 4 / 1;
}
.profile-img {
border-radius: 50%;
width: 160px;
height: 160px;
border: 4px solid #000;
background-color: #1e2226;
margin: 0 auto;
position: relative;
overflow: hidden;
bottom: 100px;
}
Làm cho nó đáp ứng
Để đảm bảo rằng thiết kế của bạn đáp ứng trên các màn hình khác nhau, hãy áp dụng các truy vấn phương tiện cho phù hợp. Nếu bạn là người mới bắt đầu phát triển web, bạn nên học cách sử dụng các truy vấn phương tiện trong HTML và CSS vì chúng cực kỳ quan trọng khi xây dựng các trang web đáp ứng.
@media (max-width: 560px) {
.profile-img {
width: 100px;
height: 100px;
bottom: 60px;
}
}
Tạo kiểu cho văn bản
Tạo kiểu cho văn bản bằng cách đặt một lề, cỡ chữ, và font-weight. Bạn cũng có thể thay đổi màu văn bản, thêm đầu đề, đoạn văn hoặc ký tự liên kết gắn thẻ theo sở thích của bạn. Thêm hiệu ứng di chuột vào thẻ liên kết rất hữu ích vì nó cho phép người dùng biết về một liên kết.
.profile-text {
margin-top: -80px;
padding: 0 16px;
}.profile-text h1 {
margin-bottom: 0;
font-size: 24px;
overflow: hidden;
}
.profile-text p {
margin: 4px 0;
overflow: hidden;
}
.profile-text h5 {
margin-top: 4px;
font-size: 14px;
margin-bottom: 8px;
font-weight: 400;
color: #ffffff99;
overflow: hidden;
}
.profile-text a {
color: #70b5f9;
font-size: 14px;
text-decoration: none;
font-weight: 600;
}
.profile-text a:hover {
color: #70b5f9;
text-decoration: underline;
}
Tạo kiểu cho CTA
Kêu gọi hành động (CTA) rất quan trọng vì bạn thường muốn chuyển đổi lượt truy cập của người dùng theo một cách nào đó. Tạo màu sắc dễ nhận thấy sẽ giúp CTA của bạn nổi bật trên trang.
.profile-cta {
padding: 16px 16px 32px;
display: flex;
}
.profile-cta a {
padding: 6px 16px;
border-radius: 24px;
text-decoration: none;
display: block;
}.message-btn {
background-color: #70b5f9;
color: #000;
}
.more-btn {
color: inherit;
border: 1px solid rgba(255, 255, 255, 0.9);
margin-left: 8px;
}
Đầu ra:
Tắt hiệu ứng tải bộ xương bằng JavaScript
Bây giờ bạn đã thêm hiệu ứng hàng đầu bằng cách sử dụng CSS, đã đến lúc tắt nó bằng cách sử dụng JavaScript. Hoạt ảnh sẽ lặp lại vô số lần theo mặc định, nhưng bạn muốn nó chỉ chạy trong vài giây. Bạn có thể đặt thời gian thành 4000 mili giây bằng cách sử dụng setTimeout. Nó sẽ xóa lớp bộ xương khỏi tất cả các phần tử sau 4 giây.
Ghi chú: Đảm bảo thêm ngay trước khi kết thúc tiết diện.
const skeletons = document.querySelectorAll('.skeleton')
skeletons.forEach((skeleton) => {
setTimeout(() => {
skeleton.classList.remove('skeleton')
}, 4000)
})
Đầu ra:
JavaScript là gì và nó hoạt động như thế nào?
Bạn đã tạo thành công hiệu ứng tải màn hình khung bằng HTML, CSS và JavaScript. Giờ đây, bất cứ khi nào có bất kỳ ai yêu cầu nội dung mới từ máy chủ, bạn có thể hiển thị hiệu ứng tải màn hình khung trong khi dữ liệu đang tải. Nó đang trở thành một xu hướng thiết kế phổ biến hơn, như bạn có thể thấy nó trên các trang web như Google, Facebook và Slack.
Trong khi đó, nếu bạn chưa quen với JavaScript, bạn có thể tìm hiểu những điều cơ bản bằng cách hiểu JavaScript và cách nó tương tác với HTML và CSS.
Đọc tiếp
Giới thiệu về tác giả
