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