Ads

Preloader

Yo! Kali ini saya akan membagikan cara untuk membuat PreLoader di Web atau Blog.

PreLoader
Dagruel

jujutsukaisen.jp

PreLoader yang pertama dari situs jujutsukaisen.jp jadi langsung saja menuju tutor nya.

Pertama buka template blog kalian lalu tempelkan css berikut di atas tag </style>.

@keyframes ani{0%{-webkit-mask-position:0 0;mask-position:0 0}to{-webkit-mask-position:100% 0;mask-position:100% 0}}@keyframes ani_ie{0%{opacity:1}to{opacity:0}}body{overflow:hidden}body.loaded{overflow-y:auto}#topLoad{position:fixed;left:0;top:0;right:0;bottom:0;min-width:1240px;min-height:640px;z-index:10000}.tMask{content:"";height:100%;top:0;left:0;background:#000;-webkit-mask:url(https://1.bp.blogspot.com/-E1AWMj-7OUM/YEsmYGC3T6I/AAAAAAAAH5E/PNoO6gcLXPUN4-7hN7RM3D3zRjx1io52wCNcBGAsYHQ/s0/btn_sprite.png);mask:url(https://1.bp.blogspot.com/-E1AWMj-7OUM/YEsmYGC3T6I/AAAAAAAAH5E/PNoO6gcLXPUN4-7hN7RM3D3zRjx1io52wCNcBGAsYHQ/s0/btn_sprite.png);-webkit-mask-size:2300% 100%;mask-size:2300% 100%}#blueMark.active .bMask,#topLoad.active .tMask{animation:ani .7s steps(22) .3s both}#tMark,#tMark>.left,#tMark>.right{position:absolute;top:0;transition:.3s ease}#tMark{margin:auto;right:0;bottom:0;left:0;color:#fff;z-index:2;width:95px;height:87px}#tMark.active{transition-delay:.6s;opacity:0}#tMark>.left,#tMark>.right{width:29px;height:56px}#tMark>.left{left:10px}#tMark>.right{right:10px}#blueMark,#tMark>.pinset{left:0;right:0;transition:.3s ease}#tMark>.pinset{width:6px;height:24px;margin:auto;transform:rotate(180deg);top:10px;position:absolute}#tMark svg path{fill:#fff}#tMark span,.bMask,.tMask{width:100%;position:absolute}#tMark span{display:block;text-align:center;font-size:17px;bottom:0;line-height:1}#blueMark{position:fixed;top:0;bottom:0;min-width:1240px;min-height:640px;z-index:9999}.bMask{content:"";height:100%;top:0;left:0;background:url(https://1.bp.blogspot.com/-6qPZpvu3bGM/YEsmYNkfQ7I/AAAAAAAAH5I/n6513R_6wYcACbo_LvpFlT-SOX8nK4nzwCNcBGAsYHQ/s0/blue_bg.jpg) no-repeat center / cover;-webkit-mask:url(https://1.bp.blogspot.com/-E1AWMj-7OUM/YEsmYGC3T6I/AAAAAAAAH5E/PNoO6gcLXPUN4-7hN7RM3D3zRjx1io52wCNcBGAsYHQ/s0/btn_sprite.png);mask:url(https://1.bp.blogspot.com/-E1AWMj-7OUM/YEsmYGC3T6I/AAAAAAAAH5E/PNoO6gcLXPUN4-7hN7RM3D3zRjx1io52wCNcBGAsYHQ/s0/btn_sprite.png);-webkit-mask-size:2300% 100%;mask-size:2300% 100%}main{opacity:0;transition:.3s}main.active{opacity:1}@media all and (-ms-high-contrast:none){.bMask,.tMask{content:"";width:100%;height:100%;position:absolute;top:0;left:0}.tMask{background:#000}#blueMark.active .bMask,#topLoad.active .tMask{animation:ani_ie .7s}.bMask{background:url(https://1.bp.blogspot.com/-6qPZpvu3bGM/YEsmYNkfQ7I/AAAAAAAAH5I/n6513R_6wYcACbo_LvpFlT-SOX8nK4nzwCNcBGAsYHQ/s0/blue_bg.jpg) no-repeat center / cover;-webkit-mask:url(https://1.bp.blogspot.com/-E1AWMj-7OUM/YEsmYGC3T6I/AAAAAAAAH5E/PNoO6gcLXPUN4-7hN7RM3D3zRjx1io52wCNcBGAsYHQ/s0/btn_sprite.png);mask:url(https://1.bp.blogspot.com/-E1AWMj-7OUM/YEsmYGC3T6I/AAAAAAAAH5E/PNoO6gcLXPUN4-7hN7RM3D3zRjx1io52wCNcBGAsYHQ/s0/btn_sprite.png);-webkit-mask-size:2300% 100%;mask-size:2300% 100%}}@media screen and (max-width:768px){#blueMark,#topLoad{min-width:auto;min-height:auto}#tMark{transform:scale(.8)}}

Kedua Tempelkan HTML Berikut di bawah tag <body>.

<div id="topLoad">
  <p id="tMark">
    <svg class="left" xmlns="http://www.w3.org/2000/svg" width="29" height="56" viewBox="0 0 29 56">
      <path d="M1034,1006l-18,32,22,12,7,12-4-12,0.38-4.74L1037,1047l-15-11Z" transform="translate(-1016 -1006)"/>
    </svg>
    <span class="cinzel">Loading</span>
    <svg class="pinset" xmlns="http://www.w3.org/2000/svg" width="6" height="24" viewBox="0 0 6 24">
      <path id="pagetop_icon_in.svg" class="cls-1" d="M1163,960l-3,21,3,3,3-3Z" transform="translate(-1160 -960)"/>
    </svg>
    <svg class="right" xmlns="http://www.w3.org/2000/svg" width="29" height="56" viewBox="0 0 29 56">
      <path d="M1132,1006l18,32-22,12-7,12,4-12-0.38-4.74L1129,1047l15-11Z" transform="translate(-1121 -1006)"/>
    </svg>
  </p>
  <div class="tMask"></div>
</div>
<div id="blueMark">
  <div class="bMask"></div>
</div>

Ketiga Tempelkan JavaScript Berikut di atas tag </body>.

<script type="text/javascript">
//<![CDATA[
  function firstAnimation(a){$(window).innerWidth()>768?a?$("html,body").animate({scrollTop:0},1,function(){$("#tMark").addClass("active"),$("#tMark.active").on("webkittransitionend transitionend",function(){$("#topLoad").addClass("active"),$("#topLoad.active").on("webkitAnimationEnd AnimationEnd",function(){$("#topLoad").remove(),$("#blueMark").addClass("active"),$("#blueMark.active").on("webkitAnimationEnd AnimationEnd",function(){$("#blueMark").remove(),setTimeout(function(){$("body").addClass("loaded"),$("main").addClass("active")},1)})})})}):($("#blueMark").remove(),$("body").addClass("loaded"),$("html,body").animate({scrollTop:0},1,function(){$("#tMark").addClass("active"),$("#tMark.active").on("webkittransitionend transitionend",function(){$("#topLoad, main").addClass("active"),$("#topLoad.active").on("webkitAnimationEnd AnimationEnd",function(){$("#topLoad").remove()})})})):a?($("#tMark").addClass("active"),$("#tMark.active").on("webkittransitionend transitionend",function(){$("#topLoad, main").addClass("active"),$("#topLoad.active").on("webkitAnimationEnd AnimationEnd",function(){$("#blueMark").addClass("active"),$("#blueMark.active").on("webkitAnimationEnd AnimationEnd",function(){$("#blueMark, #topLoad").remove(),$("body").addClass("loaded")})})})):($("#blueMark").remove(),$("body").addClass("loaded"),$("#tMark").addClass("active"),$("#tMark.active").on("webkittransitionend transitionend",function(){$("#topLoad, main").addClass("active"),$("#topLoad.active").on("webkitAnimationEnd AnimationEnd",function(){$("#topLoad").remove()})}))}$(window).on("load",function(){firstAnimation(!location.hash)});
//]]>
</script>

Kemudian simpan Template. Dan Lihat hasil nya

Untuk saat ini hanya satu yang dapat saya bagikan. Jadi jika ada yang ingin di buatkan Tampilan untuk Preloader silahkan komentar di bawah.

Comments

Blogger Disqus
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
  • Gunakan <i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>
×

Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!