Thêm hiệu ứng chờ tải trang cờ đỏ sao vàng Việt Nam cho Blogger

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.
Thêm hiệu ứng chờ tải trang cờ đỏ sao vàng Việt Nam cho Blogger
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

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.

Thêm hiệu ứng chờ tải trang cờ đỏ sao vàng Việt Nam cho Blogger

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...

Thêm hiệu ứng chờ tải trang cờ đỏ sao vàng Việt Nam cho Blogger

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ẻ!

0/5
0 ratings
5
4
3
2
1
Có những thứ luôn quẩn quanh cuộc đời bạn và đôi lúc không có lời giải thích, liệu rằng đó có phải là duyên số?!

1 Nhận xét

  • Chèn ảnh bằng cách dán trực tiếp link ảnh | Tool upload ảnh
  • Chèn video Youtube bằng cách dán trực tiếp link video
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

    1. Unknown

      Hay quá Bác. Code không khó mà quan trọng ở ý tưởng nữa.
      From: Fuvavi.com

      Trả lời Xóa
    Mới hơn Cũ hơn

    Maybe You Like

    Xin vui lòng xác nhận đồng ý nhận tin từ NLD Blog