Ön Yükleme Eklentisi
Ctrl+f yaparak </head> kodunu bulun ve aşağıdaki Css kodları </head> kodunun üstüne ekleyin.
<style type='text/css'>
#preloader-show{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000}
#loader{display:block;position:relative;left:45%;top:50%;width:200px;height:200px;margin:-50px 0 0 -50px;border-radius:50%;border:20px solid transparent;border-top-color:#ea1414;-webkit-animation:spin 2s ease infinite;animation:spin 2s ease infinite;z-index:1001}
#loader2{display:block;position:relative;left:20%;top:20%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:30px solid transparent;border-top-color:#8840da;-webkit-animation:spin 1s ease infinite;animation:spin 1s ease infinite;z-index:1001}
#loader2:before{content:"";position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-radius:50%;border:1px solid transparent;border-top-color:#316fcb;-webkit-animation:spin 1.5s linear infinite;animation:spin 1.5s linear infinite}
#loader:before{content:"";position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-radius:50%;border:40px solid transparent;border-top-color:#31d36e;-webkit-animation:spin 3s ease-in infinite;animation:spin 3s ease-in infinite}
#loader:after{content:"";position:absolute;top:15px;left:15px;right:15px;bottom:15px;border-radius:50%;border:50px solid transparent;border-top-color:#ffc600;-webkit-animation:spin 5s ease-out infinite;animation:spin 5s ease-out infinite}
#preloader-show .loader-section{position:fixed;top:0;width:51%;height:100%;background:#222;z-index:1000;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
#preloader-show .loader-section.section-left{left:0}
#preloader-show .loader-section.section-right{right:0}
.loaded #preloader-show .loader-section.section-left{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1);transition:all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1)}
.loaded #preloader-show .loader-section.section-right{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);-webkit-transition:all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1);transition:all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1)}
.loaded #loader{opacity:0;-webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out}
.loaded #preloader-show{visibility:hidden;-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition:all 0.3s 1s ease-out;transition:all 0.3s 1s ease-out}
.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn}
@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}
@keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}
@-webkit-keyframes bounceIn{0%,20%,40%,60%,80%,100%{-webkit-animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}0%{opacity:0;-webkit-transform:scale3d(0.3,0.3,0.3);transform:scale3d(0.3,0.3,0.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(0.9,0.9,0.9);transform:scale3d(0.9,0.9,0.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(0.97,0.97,0.97);transform:scale3d(0.97,0.97,0.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
@keyframes bounceIn{0%,20%,40%,60%,80%,100%{-webkit-animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}0%{opacity:0;-webkit-transform:scale3d(0.3,0.3,0.3);transform:scale3d(0.3,0.3,0.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(0.9,0.9,0.9);transform:scale3d(0.9,0.9,0.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(0.97,0.97,0.97);transform:scale3d(0.97,0.97,0.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
</style>
Daha Sonrasında yukarıdaki kodların hemen aşağısına jQuerry Kodlarını Ekleyin.
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
setTimeout(function(){
$('body').addClass('loaded');
$('h1').css('color','#222');
}, 2000);
});
//]]>
</script>
Ön Yükleme Ekranının aktif olabilmesi için <body>
kodunun hemen altına aşağıdaki kodları ekleyin.
<div id="preloader-show">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>
Daha sonrasında şablonu kaydet deyin.
|
