طريقة إضافة تأثير التحميل المسبق بواسطة css على مدونتك بلوجر
هل رأيت موقع ويب يعرض التأثير المتحركك قبل عرض الصفحة؟
نعم ، ربما تكون قد شاهدت هذا النوع من المواقع التي تعرض أداة التحميل المسبق قبل عرض محتوياتها. اليوم ، سنتعلم كيفية تثبيت التحميل المسبق على منصة بلوجر. تم تطوير هذه الأداة باستخدام CSS و HTML و jQuery. تحتاج إلى إضافة هذه الأكواد على قالب مدونتك باتباع الخطوات المذكورة هنا.
كيف يعمل تأثير Preloader Spinner؟
عند زيارة صفحة ويب مفعلة للتحميل المسبق ، يظهر تأثير متحرك لبضع لحظات ، وخلال هذا الوقت ، تظل محتويات الموقع غير مرئية. عندما يكمل التحميل المسبق عملية التحميل إلى الوقت المحدد ، فإنه يتلاشى ويصبح محتوى الموقع مرئيًا. تحتاج إلى إعادة النظر في مفهوم تجربة المستخدم الجيدة.
أولا الصق هذا الكود فوق وسم </head> مباشرة
<style>
.sk-cube-grid{width:40px;height:40px;margin:250px auto}.sk-cube-grid .sk-cube{width:33%;height:33%;background-color:#fff;float:left;-webkit-animation:sk-cubeGridScaleDelay 1.3s infinite ease-in-out;animation:sk-cubeGridScaleDelay 1.3s infinite ease-in-out}.sk-cube-grid .sk-cube1{-webkit-animation-delay:.2s;animation-delay:.2s}.sk-cube-grid .sk-cube2{-webkit-animation-delay:.3s;animation-delay:.3s}.sk-cube-grid .sk-cube3{-webkit-animation-delay:.4s;animation-delay:.4s}.sk-cube-grid .sk-cube4{-webkit-animation-delay:.1s;animation-delay:.1s}.sk-cube-grid .sk-cube5{-webkit-animation-delay:.2s;animation-delay:.2s}.sk-cube-grid .sk-cube6{-webkit-animation-delay:.3s;animation-delay:.3s}.sk-cube-grid .sk-cube7{-webkit-animation-delay:0s;animation-delay:0s}.sk-cube-grid .sk-cube8{-webkit-animation-delay:.1s;animation-delay:.1s}.sk-cube-grid .sk-cube9{-webkit-animation-delay:.2s;animation-delay:.2s}@-webkit-keyframes sk-cubeGridScaleDelay{0%,70%,100%{-webkit-transform:scale3D(1,1,1);transform:scale3D(1,1,1)}35%{-webkit-transform:scale3D(0,0,1);transform:scale3D(0,0,1)}}@keyframes sk-cubeGridScaleDelay{0%,70%,100%{-webkit-transform:scale3D(1,1,1);transform:scale3D(1,1,1)}35%{-webkit-transform:scale3D(0,0,1);transform:scale3D(0,0,1)}}
#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:#0088ff;z-index:1000}
#loader,#loader2{display:none}
#loader{display:unset}
</style><!--Preloaders Start-->
<div id='loader'>
<div class='sk-cube-grid'>
<div class='sk-cube sk-cube1'></div>
<div class='sk-cube sk-cube2'></div>
<div class='sk-cube sk-cube3'></div>
<div class='sk-cube sk-cube4'></div>
<div class='sk-cube sk-cube5'></div>
<div class='sk-cube sk-cube6'></div>
<div class='sk-cube sk-cube7'></div>
<div class='sk-cube sk-cube8'></div>
<div class='sk-cube sk-cube9'></div>
</div>
</div>
<div id='loader2'>
<div CLASS='wrap'>
<div CLASS='bg'>
<div CLASS='loading'>
<span CLASS='title'>جاري تحميل ...</span>
<span CLASS='text'>موقع تقني واي</span>
</div>
</div>
</div>
</div>
<!--Preloaders End--><script type='text/javascript'>
$(window).load(function(){setTimeout(function(){$(".sk-cube-grid").fadeOut("slow"),setTimeout(function(){$("#loader").fadeOut("slow")},1e3)},1e3)});
</script>
هذه الإضافة جميلة ورائعة خصوصا لأصحاب المدونات التقيلة بحيت تخفي العيوب و مايجري وراء تحميل الصفحة, مع ذلك لكل شخص حريته يمكنك تطبيقها حتى على مدونات الخفيفة لضمان اضهار اعلانات أدسنس.
لا توجد تعليقات حتى الآن "طريقة إضافة تأثير التحميل المسبق بواسطة css على مدونتك بلوجر"
Post a Comment
ملاحظة للجميع