Anh em đã bao giờ phát cáu vì tốc độ tải trang chậm rì khiến khách truy cập "bay màu" ngay lập tức chưa? Hay anh em đang muốn tìm một thứ gì đó thật "xịn xò" để níu chân người dùng trong lúc chờ đợi? Tại devshare.pro.vn, mình cực kỳ hiểu nỗi đau này. Đôi khi, một hiệu ứng nhỏ xíu cũng đủ cứu rỗi cả một trải nghiệm lớn. Hôm nay, mình sẽ hướng dẫn anh em "thực chiến" cách tạo hiệu ứng Preloader phong cách Squid Game cực chất cho Blog/Website nhé!
Thực ra, nếu để màn hình trắng bóc lúc load trang thì thật sự quá nhàm chán. Với hiệu ứng "Trò chơi con mực" giật lag (glitch) chuẩn điện ảnh này, đảm bảo khách truy cập sẽ phải dán mắt vào màn hình cho đến khi trang web tải xong toàn bộ dữ liệu.
Preloader là gì và tại sao nó lại quan trọng?
Preloader đơn giản là hiệu ứng tải trang được hiển thị khi người dùng truy cập vào website, giúp họ không cảm thấy nhàm chán trong lúc chờ đợi. Đặc biệt, nếu bạn áp dụng một preloader độc đáo như phong cách Squid Game, người dùng sẽ có một trải nghiệm thú vị và tò mò ngay từ giây đầu tiên bước vào "địa bàn" của anh em.
Hơn nữa, preloader còn giúp cải thiện UX (trải nghiệm người dùng), khiến họ cảm thấy trang web không hề bị "treo" hay giật cục. Ai mà không ấn tượng với một thứ gì đó bí ẩn và bắt mắt cơ chứ?
Các tính năng tuyệt vời của Preloader DevSharePro
Bản code Preloader này được mình tối ưu cực kỳ gọn nhẹ, không dùng thư viện bên ngoài để tránh làm nặng web. Cùng điểm qua vài tính năng "ăn tiền" nhé:
- Tương thích với mọi chủ đề Blogger: Dù anh em dùng theme Premium đời mới (như Median UI, Fletro) hay theme cũ, code vẫn hoạt động hoàn hảo mà không bị xung đột.
- Hoạt hình mượt mà & phong cách: Hiệu ứng nhiễu sóng (glitch) 60FPS kết hợp ánh sáng neon chớp tắt cực kỳ chân thực.
- Tự điều chỉnh theo chủ đề & chế độ tối: Dễ dàng bắt tone nền để hòa hợp với Dark Mode hoặc Light Mode của website.
- Văn bản tải động: Text loading động kèm theo thương hiệu xuất hiện một cách đầy "ma mị".
Lưu ý: Anh em nên sao lưu (Backup) template trước khi chỉnh sửa code HTML để phòng trường hợp dán sai vị trí dẫn đến lỗi giao diện nhé!
Hướng dẫn chèn mã HTML, CSS và JS
Để thêm hiệu ứng này, anh em chỉ cần copy và dán toàn bộ đoạn mã dưới đây vào ngay bên dưới thẻ <body> trong phần chỉnh sửa HTML của Blogger.
Mã Code Squid Game Preloader
<!-- Bắt đầu HTML Preloader Squid Game - devshare.pro.vn -->
<div class='DevShareProLoader-overlay' id='DevShareProLoader'>
<div class='DevShareProLoader-content'>
<div class='DevShareProLoader-symbols'>
<div class='symbol circle'></div>
<div class='symbol triangle'></div>
<div class='symbol square'></div>
</div>
<div class='DevShareProLoader-text'>LOADING</div>
<div class='DevShareProLoader-brand'>devshare.pro.vn</div>
</div>
</div>
<style>
/* CSS Preloader Squid Game */
.DevShareProLoader-overlay {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: #111;
z-index: 999999;
display: flex;
justify-content: center;
align-items: center;
transition: opacity 0.6s ease, visibility 0.6s ease;
}
.DevShareProLoader-overlay.hidden {
opacity: 0;
visibility: hidden;
}
.DevShareProLoader-content {
text-align: center;
color: #ed1b76;
font-family: 'Courier New', Courier, monospace;
}
.DevShareProLoader-symbols {
display: flex;
gap: 20px;
margin-bottom: 25px;
justify-content: center;
animation: glitch 1s infinite alternate;
}
.symbol {
width: 45px; height: 45px;
border: 5px solid #ed1b76;
box-sizing: border-box;
box-shadow: 0 0 15px #ed1b76, inset 0 0 10px #ed1b76;
}
.symbol.circle { border-radius: 50%; }
.symbol.triangle {
width: 0; height: 0;
border-left: 28px solid transparent;
border-right: 28px solid transparent;
border-bottom: 50px solid #ed1b76;
border-top: none;
background: transparent;
box-shadow: none;
filter: drop-shadow(0 0 10px #ed1b76);
}
.symbol.square { border-radius: 0; }
.DevShareProLoader-text {
margin-top: 15px;
font-size: 1.2rem;
text-transform: uppercase;
letter-spacing: 3px;
color: #fff;
text-shadow: 0 0 8px #fff;
animation: blink 1.5s step-start infinite;
}
.DevShareProLoader-brand {
margin-top: 20px;
font-size: 0.8rem;
opacity: 0.6;
color: #aaa;
letter-spacing: 2px;
}
@keyframes blink {
50% { opacity: 0.2; }
}
@keyframes glitch {
0% { transform: translate(0, 0); }
20% { transform: translate(-2px, 2px); }
40% { transform: translate(2px, -1px); }
60% { transform: translate(-1px, 1px); }
80% { transform: translate(1px, -2px); }
100% { transform: translate(0, 0); }
}
</style>
<script>
// Tự động ẩn Preloader khi trang web đã load xong
window.addEventListener('load', function() {
var preloader = document.getElementById('DevShareProLoader');
if (preloader) {
setTimeout(function() {
preloader.classList.add('hidden');
}, 600); // Đợi thêm 0.6s để người dùng kịp "thưởng thức" hiệu ứng
}
});
</script>
<!-- Kết thúc HTML Preloader -->
Mẹo nhỏ xịn xò: Anh em có thể thay đổi mã màu #ed1b76 (màu hồng đậm chuẩn lính canh Squid Game) sang màu khác bằng cách sửa trong code CSS nếu muốn đồng bộ hoàn toàn với tone màu chủ đạo của website nhé.
Lời kết
Vậy là xong! Chỉ với vài thao tác copy-paste nhanh gọn, anh em đã trang bị cho Blogspot của mình một hiệu ứng Preloader "nhức nách" mang đậm chất sinh tồn của Squid Game rồi. Hy vọng bài viết này sẽ giúp website của anh em thêm phần chuyên nghiệp và giữ chân được nhiều độc giả hơn.
Nếu trong quá trình thao tác có đoạn nào bị lỗi hay gặp trầy trật, mấy bồ cứ mạnh dạn để lại email hoặc bình luận phía dưới, mình sẽ hỗ trợ fix lỗi nhanh như chớp. Đừng quên chia sẻ bài viết này cho hội anh em coder cùng học hỏi nhé. Chúc anh em áp dụng thành công!
