nafasmedia | Saya tak habis habis membuatkan tutorial untuk mempercantik blog kalian, pada kali ini saya akan memberikan tutorial cara membuat Preloader diblog. Apa itu Preloader? Preloader atau pre load atau dalam bahasa indonesia pra memuat. Jadi akan ada efek animasi sebelum halaman dari website itu dimuat.
Saya akan memberikan 2 opsi gaya untuk preloader yang akan kita terapkan dan 2 opsi tersebut yaitu gaya folding cube dan yang ke 2 gaya sp wave. bagi kalian yang sudah penasaran bagaimana cara membuatnya silahkan simak tutorial lengkapnya dibawah, Cekidot
Gaya Folding Cube
Silahkan copy semua code css dibawah ini dan letakan sebelum kode </style> atau ]]></b:skin.
/*-----------
preloader
------------*/
.preloader{position:fixed;top:0;left:0;width:100%;height:100%;background:#75cbe7;background:-webkit-gradient(linear,left top,left bottom,from(#75cbe7),to(#138fc2));background:linear-gradient(to bottom,#75cbe7 0%,#138fc2 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#75cbe7',endColorstr='#138fc2',GradientType=0);z-index:99999999999}
.sk-folding-cube{margin:20px auto;width:40px;height:40px;position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-20px;-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}
.sk-folding-cube .sk-cube{float:left;width:50%;height:50%;position:relative;-webkit-transform:scale(1.1);transform:scale(1.1)}
.sk-folding-cube .sk-cube:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff;-webkit-animation:sk-foldCubeAngle 2.4s infinite linear both;animation:sk-foldCubeAngle 2.4s infinite linear both;-webkit-transform-origin:100% 100%;transform-origin:100% 100%}
.sk-folding-cube .sk-cube2{-webkit-transform:scale(1.1) rotateZ(90deg);transform:scale(1.1) rotateZ(90deg)}
.sk-folding-cube .sk-cube3{-webkit-transform:scale(1.1) rotateZ(180deg);transform:scale(1.1) rotateZ(180deg)}
.sk-folding-cube .sk-cube4{-webkit-transform:scale(1.1) rotateZ(270deg);transform:scale(1.1) rotateZ(270deg)}
.sk-folding-cube .sk-cube2:before{-webkit-animation-delay:0.3s;animation-delay:0.3s}
.sk-folding-cube .sk-cube3:before{-webkit-animation-delay:0.6s;animation-delay:0.6s}
.sk-folding-cube .sk-cube4:before{-webkit-animation-delay:0.9s;animation-delay:0.9s}
@-webkit-keyframes sk-foldCubeAngle{0%,10%{-webkit-transform:perspective(140px) rotateX(-180deg);transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{-webkit-transform:perspective(140px) rotateX(0deg);transform:perspective(140px) rotateX(0deg);opacity:1}90%,100%{-webkit-transform:perspective(140px) rotateY(180deg);transform:perspective(140px) rotateY(180deg);opacity:0}}
@keyframes sk-foldCubeAngle{0%,10%{-webkit-transform:perspective(140px) rotateX(-180deg);transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{-webkit-transform:perspective(140px) rotateX(0deg);transform:perspective(140px) rotateX(0deg);opacity:1}90%,100%{-webkit-transform:perspective(140px) rotateY(180deg);transform:perspective(140px) rotateY(180deg);opacity:0}} Selanjutnya copy semua code html dibawah dan letakan dibawah kode <body>.
<div class='preloader'>
<div class='sk-folding-cube'>
<div class='sk-cube1 sk-cube'/>
<div class='sk-cube2 sk-cube'/>
<div class='sk-cube4 sk-cube'/>
<div class='sk-cube3 sk-cube'/>
</div>
</div> Yang terakhir copy semua kode javascript dibawah dan letakan diatas kode </body>.
<script type='text/javascript'>
//<![CDATA[
// Preloader
$(window).load(function(){$(".preloader").fadeOut().delay(500).fadeOut("slow"),$("body").delay(500)});
//]]>
</script>Gaya Sp Wave
Silahkan copy semua code css dibawah ini dan letakan sebelum kode </style> atau ]]></b:skin.
#af-preloader{width:100%;height:100%;position:fixed;background-color:#fff;z-index:99999999;top:0;left:0}
.af-preloader-wrap{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.af-sp{width:42px;height:42px;clear:both;margin:20px auto}
.af-sp-wave{border-radius:50%;position:relative;opacity:1}
.af-sp-wave:before,.af-sp-wave:after{content:'';border:2px #33b5e5 solid;border-radius:50%;width:100%;height:100%;position:absolute;left:0}
.af-sp-wave:before{transform:scale(1,1);opacity:1;-webkit-animation:spWaveBe .6s infinite linear;animation:spWaveBe .6s infinite linear}
.af-sp-wave:after{transform:scale(0,0);opacity:0;-webkit-animation:spWaveAf .6s infinite linear;animation:spWaveAf .6s infinite linear}
@-webkit-keyframes spWaveAf{from{-webkit-transform:scale(.5,.5);opacity:0}to{-webkit-transform:scale(1,1);opacity:1}}
@keyframes spWaveAf{from{transform:scale(.5,.5);opacity:0}to{transform:scale(1,1);opacity:1}}
@-webkit-keyframes spWaveBe{from{-webkit-transform:scale(1,1);opacity:1}to{-webkit-transform:scale(1.5,1.5);opacity:0}}
@keyframes spWaveBe{from{-webkit-transform:scale(1,1);opacity:1}to{-webkit-transform:scale(1.5,1.5);opacity:0}} Selanjutnya copy semua code html dibawah dan letakan dibawah kode <body>.
<div id='af-preloader'>
<div class='af-preloader-wrap'>
<div class='af-sp af-sp-wave'>
</div>
</div>
</div> Yang terakhir copy semua kode javascript dibawah dan letakan diatas kode </body>.
<script>//<![CDATA[
window.addEventListener('load', function() {
// document.querySelector('#af-preloader').style.display = 'none'
document.getElementById('af-preloader').style.display = 'none'
})
//]]></script>
<script>//<![CDATA[
$(window).on('load', function() {
$('#af-preloader').delay(500).fadeOut('slow')
})
//]]></script> Itu dia cara memasang preloader diblogger, jika template kalian semula sudah terpasang preloader maka silahkan hapus dahulu kode nya, biasanya terletak persis seperti yang saya suruh letakan kode diatas.
Baiklah teman teman itu saja yang bisa saya sampaikan kali, terimakasih sudah berkunjung, sampai jumpa dinext artikel
0 Comments