Hiệu ứng chờ tải trang (preload) cũng không có gì là mới mẻ cả và hiện nay rất nhiều trang web sử dụng. Mỗi trang đều sử dụng cho mục đích khác nhau.
Bài viết này mình sẽ chia sẻ cho các bạn cách thêm hiệu ứng chờ tải trang hay còn gọi là preload cho blog hoặc trang web của các bạn. Bài viết này đặc biệt là hiệu ứng chờ tải trang có dạng cờ đỏ sao vàng và búa liềm nhằm mục đich hưởng ứng ngày lễ Quốc khánh Việt Nam ngày 2 tháng 9 và cũng có thể sử dụng cho ngày 30 tháng 4.
Hiệu ứng chờ tải trang thì cũng không có gì là mới mẻ cả và hiện nay rất nhiều trang web sử dụng. Mỗi trang đều sử dụng cho mục đích khác nhau mà một trong những nguyên do cần đưa hiệu ứng này vào là che đi phần khuyết điểm trong thời gian tải trang, bất kể thời gian tải bao lâu nếu thấy trang có hiện tượng bị giựt, bố cục hiển thị không đồng bộ ví dụ phần sau tải trước phần trước…
Hiệu ứng chờ tải trang cờ đỏ sao vàng Việt Nam cũng vậy mục đích đầu tiên là để tôn vinh ngày Quốc khánh Việt Nam cũng như những ngày lễ của dân tộc Việt Nam, mục đích còn lại là để che đi những khuyết điểm trong thời gian tải trang hiểu một cách đơn gian là nó sẽ che đi toàn bộ phần hiển thị của trang web và hiệu ứng sẽ ẩn đi khi toàn bộ trang web được tải xong. Thủ thuật này mình sẽ chỉ sử dụng HTML, CSS và JavaScript nên nó không ảnh hưởng gì nhiều đến tốc độ tải trang của blog hay trang web hiện tại nên các không phải băn khoăn.
Thêm hiệu ứng chờ tải trang cờ đỏ sao vàng Việt Nam cho Blogger
Bước 1: Chèn đoạn CSS dưới đây vào vị trí lưu trữ CSS của bạn, đối với Blogger thì có thể là ở trong cặp thẻ <b:skin>...</b:skin> hoặc <style>...</style>
.pageLoading{z-index:999;position:fixed;top:-30%;right:-30%;bottom:-30%;left:-30%;display:flex;align-items:center;justify-content:center;background:#fff;transition:all .7s ease}
.pageLoading.done{visibility:hidden;opacity:0}
.pageLoadingC{position:absolute;display:block;background:#db2017;height:100%;width:100%;transition:all .7s ease}
.pageLoading svg{width:0;height:0;visibility:hidden;opacity:0;fill:#ffff00;transition:all .7s ease;z-index:1}
.pageLoading svg.beatAnimation{animation:beat 2.3s linear infinite}
.pageLoading svg.active{visibility:visible;opacity:1;width:60px;height:60px}
.pageLoading.loaded svg.active.starSvg{width:auto;height:15%}
.pageLoading.loaded svg.active.socialistSvg{width:auto;height:12%}
@keyframes beat{0%,50%,100%{transform:scale(1, 1)}30%,80%{transform:scale(0.72, 0.75)}}
Bước 2: Tiếp tục tìm đến thẻ <body> và chèn code HTML dưới đây ngay phía dưới thẻ <body> đó.
<div class='pageLoading'>
<div class='pageLoadingC'></div>
<svg class='starSvg active beatAnimation' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z'/></svg>
<svg class='socialistSvg' viewBox='0 0 399.99 364.75' xmlns='http://www.w3.org/2000/svg'><path class='cls-1' d='M395,323.33l-48.7-47c36.83-40,44.46-98.87,26-153-.05-.16-.11-.33-.17-.49q-.81-2.34-1.68-4.67c-.06-.18-.13-.36-.2-.54-1.26-3.35-2.64-6.68-4.11-10-.11-.25-.22-.51-.34-.76-.69-1.53-1.39-3-2.12-4.56l-.15-.32c-.8-1.64-1.62-3.29-2.47-4.92l-.27-.5c-.74-1.42-1.5-2.82-2.28-4.22l-.51-.92q-2.64-4.66-5.54-9.22l-.63-1q-1.2-1.84-2.45-3.68c-.21-.31-.41-.62-.63-.93-1-1.48-2.05-2.94-3.11-4.4l-.37-.49q-1.41-1.91-2.86-3.79l-.89-1.14q-1.39-1.77-2.83-3.52c-.2-.24-.39-.48-.59-.71-1.14-1.38-2.3-2.73-3.49-4.08l-.87-1q-1.41-1.58-2.85-3.12c-.35-.38-.69-.75-1-1.12-1.24-1.32-2.49-2.62-3.78-3.9-2.69-2.7-5.44-5.29-8.22-7.76C292.71,19.37,264.14,6,235.24,1,233.1.62,231,.29,228.81,0a2.09,2.09,0,0,0-.71,0,2,2,0,0,0-.6.25,2.07,2.07,0,0,0-.91,1.58,1.94,1.94,0,0,0,.83,1.72l.2.14.89.63,0,0c1.13.8,2.37,1.69,3.69,2.66h0C243.06,14.94,260,28,274.9,43c26.18,26.17,43.9,55.74,52.76,85l-.32-1c9.18,29.64,9.26,59-.21,84.09l0,.08a102.06,102.06,0,0,1-4.59,10.37c-.06.12-.12.24-.19.36-.48.94-1,1.86-1.49,2.78l-.4.71c-.47.83-1,1.65-1.45,2.47l-.44.72c-.57.91-1.15,1.82-1.75,2.72l-.2.31c-.68,1-1.38,2-2.1,3l-.4.54c-.58.78-1.16,1.55-1.75,2.31-.25.31-.49.62-.74.92-.51.64-1,1.27-1.56,1.9l-.51.6L186.61,122.3c19.91-20.67,36.2-38.68,42-45.17a2.87,2.87,0,0,0,.54-3,2.81,2.81,0,0,0-.7-1,2.73,2.73,0,0,0-.53-.4c-3.52-2.1-8-4.52-12.82-7-16.32-8.51-37.44-18.32-45-21.79a4.56,4.56,0,0,0-1.19-.37,5.69,5.69,0,0,0-.83-.07,4.72,4.72,0,0,0-1.34.19,5,5,0,0,0-.64.25,4.6,4.6,0,0,0-1.17.76C158.13,50.7,151.28,57,144.57,63.37c-1.8,1.72-3.61,3.43-5.39,5.15q-6.31,6.06-12.35,12c-5.16,5.1-10.15,10.11-14.85,14.91l-3.1,3.17c-14.8,15.18-26.59,27.91-32.6,34.49L74.61,135a4.8,4.8,0,0,0-.24,6.16c15.57,19.75,33.73,36.83,40.85,43.29a4.78,4.78,0,0,0,6.29.11c11.29-9.42,23.63-20.85,35.83-32.73L271.4,269.68c-22.8,10.44-47.88,12.08-72.69,6.23l-1.32-.32c-19.15-4.72-38.11-13.89-55.69-26.91l-2.8-2.11c-1.85-1.43-3.69-2.91-5.51-4.42-.91-.76-1.81-1.52-2.71-2.3q-5.42-4.68-10.58-9.84l-1.69-1.7-1-1-.69-.69c-.31-.31-.63-.6-1-.87s-.67-.52-1-.76a12.32,12.32,0,0,0-3.33-1.56A12.08,12.08,0,0,0,109,223q-.6-.06-1.2-.06a12.83,12.83,0,0,0-2.4.22,12.67,12.67,0,0,0-5.55,2.59c-.32.27-.64.55-1,.86L80.35,247.22a47.78,47.78,0,0,0-5.87-3.71c-.74-.39-1.47-.74-2.19-1a20.66,20.66,0,0,0-3.14-1.05c-.38-.1-.76-.17-1.13-.23a12.57,12.57,0,0,0-1.8-.17c-.31,0-.62,0-.92,0a8.62,8.62,0,0,0-5.66,2.61,8.8,8.8,0,0,0-.65.72c-.09.11-.18.24-.26.35l-.29.39c-.11.17-.21.35-.31.52s-.1.17-.14.25-.21.44-.31.67a.61.61,0,0,0,0,.12,5.92,5.92,0,0,0-.27.81h0c-.9,3.22,0,7.05,2.3,11.27a7.44,7.44,0,0,1,.87,3.75v0a7.55,7.55,0,0,1-.47,2.44h0a7.54,7.54,0,0,1-.73,1.48.35.35,0,0,1-.05.08c-.12.19-.25.37-.39.55l-.13.17-.39.44-.16.17c-.18.18-.38.36-.58.53l-49.72,38h0c-.53.47-1,1-1.52,1.47-.16.16-.3.34-.46.51-.31.35-.62.69-.9,1s-.33.43-.49.64-.49.67-.72,1-.3.47-.45.7-.4.67-.59,1-.27.5-.4.75-.33.68-.48,1-.23.51-.33.77-.27.7-.39,1.06-.18.5-.26.76-.21.78-.3,1.17c-.06.22-.13.44-.17.67-.12.58-.22,1.17-.29,1.75,0,.3,0,.59-.07.88s0,.63-.06.94,0,.63,0,.94,0,.57,0,.85.06.64.1,1,.07.53.11.8.12.64.19,1,.13.5.19.75.18.63.29.95.17.46.26.7.25.62.39.93.22.42.33.62a15.48,15.48,0,0,0,2.76,3.82l13.91,13.91c7.35,7.34,20.43,5.86,28.45-3.23l38.21-49.77a7.74,7.74,0,0,1,9.54-2.08c6.16,3.23,11.45,3.79,15,.2,4.6-4.6,2.43-12-3.46-20.37l5.57-4.59a4.15,4.15,0,0,1,5.57.26l.82.83c55.09,55.08,129.06,69.6,189,36.84l51.23,52.95c6.59,6.82,17.77,6.63,24.83-.42l11.17-11.18C401.62,341.11,401.81,329.93,395,323.33Z'/></svg>
</div>
Bước 3: Tìm đến thẻ đóng </body> và chèn đoạn JavaScript dưới đây ngay phía trên nó.
<script>/*<![CDATA[*/
document.querySelector("html").style.overflow = "hidden"
document.addEventListener("DOMContentLoaded", () => {
setTimeout(() => {
var pageLoading = document.querySelector(".pageLoading"),
svg1 = document.querySelector("svg.starSvg"),
svg2 = document.querySelector("svg.socialistSvg");
svg1.classList.remove("beatAnimation"), pageLoading.classList.add("loaded"), setTimeout(() => {
svg1.classList.remove("active"), svg2.classList.add("active"), setTimeout(() => {
pageLoading.classList.add("done"), pageLoading.addEventListener("transitionend", () => {
document.querySelector("html").style.overflow = "auto"
pageLoading.remove()
})
}, 2e3)
}, 2e3)
}, 2e3)
});
/*]]>*/</script>
Vậy là xong, mình đã hướng dẫn các bạn cách thêm hiệu ứng chờ tải trang cờ đỏ sao vàng Việt Nam cho Blogger, demo các bạn có thể tại lại trang bài viết này để xem. Nếu bạn thấy bài viết hay và hữu ích hãy chia sẻ bài viết về trang Facebook cá nhân để lưu lại nhé. Chúc các bạn vui vẻ!
