Hiệu ứng Page Preloading cho Blogger

Page Preloading

Chào các bạn, hôm nay Iris Tips sẽ giới thiệu cho các bạn thủ thuật Page Preloading sử dụng CSS và SVGs. Thủ thuật này sẽ làm blog của bạn trở nên sinh động hơn khi loading trang.

Hiệu ứng Page Preloading cho Blogger/Blogspot

Bước 1: Vào Mẫu >> Chỉnh sửa HTML thêm trước thẻ ]]></b:skin> 1 trong 3 style sau:

Style 1: Glasshour

• DEMO

 /* HourGlass */ 
.ip-header {
position: fixed;
top: 0;
z-index: 100;
min-height: 480px;
width: 100%;
height: 100%;
background: #505050 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx5t793PmFdpr_ffkjSzmJP6eolr7BfKNcMVZABOMYwkglZopsj6_ewnI0QixqtDS59-Do3pi3wQ6D0pr0IdMPYiuPzjYAaXrhdRuhK_XmmCFO8o8nSEg1j-3AXAyzyPqNBdsw0z1k7O_O/s1600/hourglass.gif) no-repeat center center; 
/* warna background dan gambar loader *//* Iris-Tips.blogspot.com */
z-index: 999999;
}
.ip-header .ip-loader svg path.ip-loader-circlebg {
stroke: #fff; /* warna background circle loader *//* Iris-Tips.blogspot.com */
}
.ip-header .ip-loader svg path.ip-loader-circle {
-webkit-transition: stroke-dashoffset 0.2s;
transition: stroke-dashoffset 0.2s;
stroke: #13BAFA; /* Warna garis circle saat loading *//* Iris-Tips.blogspot.com */
} 

Style 2: Kurumi

• DEMO

 /* KURUMI */
.ip-header {
position: fixed;
top: 0;
z-index: 100;
min-height: 480px;
width: 100%;
height: 100%;
background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAA214NfXgrtce-LGdvKdTeRzc-FHCCRnwzGDbIOulNrn8fGF-nPRD6gv4AZe4hgbe8CooilUrLTOp9XFpoSQii5hjPlkNM17zd1mCp8yOjisUmINidhQhmG2U-8pfjg9ChsGMBpWPGA1c/s1600/kurumi.gif) no-repeat center center; 
/* warna background dan gambar loader *//* Iris-Tips.blogspot.com */
z-index: 999999;
}
.ip-header .ip-loader svg path.ip-loader-circlebg {
stroke: #222; /* warna background circle loader *//* Iris-Tips.blogspot.com */
}
.ip-header .ip-loader svg path.ip-loader-circle {
-webkit-transition: stroke-dashoffset 0.2s;
transition: stroke-dashoffset 0.2s;
stroke: #DB2209; /* Warna garis circle saat loading *//* Iris-Tips.blogspot.com */
}
 

Style 3: Nisekoi

• DEMO

 /* NISEKOI */
.ip-header {
position: fixed;
top: 0;
z-index: 100;
min-height: 480px;
width: 100%;
height: 100%;
background: #23B0E8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0L-hQ1bRZQRl9yBvKKrNAqFdMYajGbK98oVV54ZWQe-h78uDOUOm3k8j366IZ_5W0nJ2v7cXs_idlik8KARpNPMx9ZD4S8ZpvUcXnEamVM6VbPJJZetsZKaAhs4WKIIndbSZTSHylAdYG/s1600/Nisekoi.gif) no-repeat center center; 
/* warna background dan gambar loader */
z-index: 999999;
}
.ip-header .ip-loader svg path.ip-loader-circlebg {
stroke: #fff; /* warna background circle loader *//* Iris-Tips.blogspot.com */
}
.ip-header .ip-loader svg path.ip-loader-circle {
-webkit-transition: stroke-dashoffset 0.2s;
transition: stroke-dashoffset 0.2s;
stroke: #FFFF2A; /* Warna garis circle saat loading *//* Iris-Tips.blogspot.com */
} 

Bước 2: Tiếp tục copy đoạn CSS dưới đây ngay sau đoạn CSS trên

 /* Pre-Loader main */
.ip-loader {
position: absolute;
left: 0;
width: 100%;
opacity: 0;
cursor: default;
pointer-events: none;
}
.ip-loader {
bottom: 20%;
}
.ip-header .ip-inner {
display: block;
margin: 0 auto;
}
.ip-header .ip-loader svg path {
fill: none;
stroke-width: 6;
}

/* Animasi */
.loading .ip-loader {
opacity: 1;
-webkit-animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both;
animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both;
}

.loading .ip-loader {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}

@-webkit-keyframes animInitialHeader {
from { opacity: 0; -webkit-transform: translate3d(0,800px,0); }
}
@keyframes animInitialHeader {
from { opacity: 0; -webkit-transform: translate3d(0,800px,0); transform: translate3d(0,800px,0); }
}

.loaded .ip-loader {
opacity: 1;
}

.loaded .ip-loader {
-webkit-animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
}

@-webkit-keyframes animLoadedLoader {
to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); }
}

@keyframes animLoadedLoader {
to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); }
}

/* Animasi header ketika loading selesai */
.loaded .ip-header {
-webkit-animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
}

@-webkit-keyframes animLoadedHeader {
to { -webkit-transform: translate3d(0,-100%,0); }
}
@keyframes animLoadedHeader {
to { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); }
}
.layout-switch .ip-header {
position: absolute;
}
/* End Preloader */
 

Bước 3: Copy và dán đoạn code dưới đây sau thẻ <body>

 <div class='ip-container' id='ip-container'>
<div class='ip-header'>
<div class='ip-loader'>
<svg class='ip-inner' height='60px' viewBox='0 0 80 80' width='60px'>
<path class='ip-loader-circlebg' d='M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z'/>
<path class='ip-loader-circle' d='M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z' id='ip-loader-circle'/></svg></div></div></div>
 

Bước 4: Chèn trước thẻ </head> đoạn script sau

 <script type="text/javascript" src="https://sites.google.com/site/iristipsblogger/file/Modernizr%202.8.3.js"/> 

Bước 5: Chèn trước thẻ </body> các đoạn script sau

 <script type="text/javascript" src="https://sites.google.com/site/iristipsblogger/file/classie.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/iristipsblogger/file/mainload.js></script>
<script type="text/javascript" src="https://sites.google.com/site/iristipsblogger/file/pathLoader.js"></script> 

Bước 6: Và cuối cùng là lưu template của bạn lại.

Chúc bạn thành công!

Created by Johanes/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm