السلام عليكم ورحمة الله وبركاته
اليوم جلبت لكم اضافة جديدة وحصرية فقط علي مدونة ويب فور وهي اضافة تاثير التحميل بشكل احترافي وهو يشبه شكل واجهة افتتاح ويندوز8 او ويندز 10 ولكن هذا الشكل جيد وبالالوان ايضا وسريع وجميل والوان مريحة للعين ويجذب الزوار لموقعك والان نتقل الي
طريقة تركيب الاضافة
- قم بالتوجه الي لوحة تحكم مدونتك
- ثم قم باختيار قالب ثم تحريرhtml
- ثم قم بالبحث عن الوسم<body>
- ثم قم بوضع هذا الكود بعده مباشرة
<div class='containe'>
<div class='loader-wrapper'>
<img alt='logo' src='http://store6.up-00.com/2017-01/148581037250541.png' width='120'/>
<div class='loader'>
<span class='pip pip-1'/>
<span class='pip pip-2'/>
<span class='pip pip-3'/>
<span class='pip pip-4'/>
<span class='pip pip-5'/>
<span class='pip pip-6'/>
</div>
</div>
</div>
<script>//<![CDATA[
// PreLoader
$(window).load(function()
{
$(".loader-wrapper .loader").fadeOut(1700);
$(".containe").fadeOut(1700);
$('html').delay(1700).css({'overflow':'visible'});
});
//]]>
</script>
<style>html{height:100%;overflow:hidden;}.containe{position:fixed;z-index:99999;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background:#f89029}.loader-wrapper{position:relative;text-align:center;width:300px;height:300px}.loader{border-radius:50%;height:120px;width:120px;left:50%;position:absolute;top:50%;transform:translate3d(-50%,0px,0px);filter:url(#goo)}.loader span{position:absolute;left:50%;width:20px;height:20px;border-radius:50%;background-color:#fff;display:block;transform-origin:0 60px 0;animation-fill-mode:forwards;animation-duration:2500ms;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(0.74,0.23,0.1,0.95);animation-name:rotate}.pip-1{animation-delay:0}.pip-2{animation-delay:100ms}.pip-3{animation-delay:200ms}.pip-4{animation-delay:300ms}.pip-5{animation-delay:400ms}.pip-6{animation-delay:500ms}@keyframes rotate{0%{transform:rotate(0deg);width:20px;height:20px}50%{width:10px;height:10px}100%{transform:rotate(360deg);width:20px;height:20px}}</style>
ليست هناك تعليقات:
إرسال تعليق