أخر الاخبار

كود إنشاء نص متحرك فى كل الإتجاهات 2023

مقال اليوم سنتعلم منة كيفية عمل نص متحرك مثل النص المتحرك فى شريط الأخبار فى المدونة الخاصة بك، ولكن هنا الوضع مختلف حيث يمكنك تحريك النص فى جميع الاتجاهات وتنسيقة باى لون تريدة وله ميزات عديدة يمكنك استخدمها فقط تابع الشرح.

 

طريقة تحريك نص في كل الاتجاهات

طريقة تحريك نص في كل الاتجاهات - Code to create animated text in all directions

كود تحريك النص موضوع المقال خفيف ويمكنك التحكم في جميع خصائص الكود مثل اتجاه الحركة من اليمين إلى اليسار والعكس ومن أعلي إلى لأسفل والعكس أيضاً.

وبالتأكيد يمكنك التحكم في خلفية النص المتحرك ولون ابخط وسرعة حركة النص ومساحة صندوق محتوى النص والعديد من الميزات والخائص التى يمكنك تعديلها.



تحريك النص من اليسار لليمين


صلوا على سيدنا محمد



الكود
<marquee scrolldelay="200" width="300px" height="25px" direction="right" bgcolor="#2d2d30"><font color="#01e1ff" > Welcome to the Alkoptantech Website</font></marquee>




خصائص كود تحريك النص

يمكنك معرفة معنى كل كلمة وتغيرها والتحكم بالحركة كما تريد لإنشاء نص متجرك فى اى اتجاه:

  • scrolldelay: هى سرعة تحرك النص يمكن التعديل عليها حسب سرعة تحرك النص المطلوبة. وكلما كان الرقم صغير زادت سرعة تحرك النص والعكس.
  • width: هى عرض صندوق محتوى النص، ويمكنك التحكم فيه من خلال تغير القيمة.
  • height: هى طول الصندوق محتوى النص، ويمكنك أيضاً التحكم فيه بتغير القيمة.
  • direction: هى اتجاة حركة النص من اليسار لليمين أو العكس ويمكنك التحكم في جميع الاتجاهات عن طريق تغير القيمة، right تحريك النص لليمين، left تحريك النص لليسار، down من أعلى لأسفل، up من الأسفل للأعلى.
  • bgcolor: لون خلفية النص اوصندوق صندوق محتوي النص ويمكنك اختيار اللون المناسب لموقعكعن طريق تغيير كود اللون الموجود في الكود(#2d2d30).
  • font color: لون الخط، أيضاً يمكنكتغير الون عن طريق تغير الكود.






تحريك النص من اليمين لليسار


Welcome to the Alkoptantech Website


الكود
<marquee scrolldelay="150" width="600px" height="25px" direction="left" bgcolor="#2d2d30"><font color="#01e1ff" >Welcome to the Alkoptantech Website</font></marquee>





تحريك النص لليمين واليسار



سبحان الله وبحمده سبحان الله العظيم


الكود
<marquee behavior="alternate" width="600px" height="25px" direction="right" bgcolor="#2d2d30"><font color="#01e1ff" > سبحان الله وبحمده سبحان الله العظيم </font></marquee>






تحريك النص من أعلى لأسفل



لا إله إلا أنت سبحانك إني كنت من الظالمين

الكود
<marquee scrolldelay="200" width="300px" height="70px" direction="down" bgcolor="#2d2d30"><font color="#01e1ff" >لا إله إلا أنت سبحانك إني كنت من الظالمين</font></marquee>

يمكنك تغيير اتجاه تحريك النص من أسفل إلى أعلى عن طريق تغيير كلمة down بكلمة up، وأيضاً تغير لون الخط والخلفية كما ذكرنا في الشرح.





تحريك النص وتوقفة عند المرور عليه بالماوس



لا إله إلا الله محمد رسول الله

الكود
<marquee scrolldelay="100" onmouseover="this.stop()" onmouseout="this.start()" width="400px" height="25px" direction="left" bgcolor="#2d2d30"><font color="#01e1ff" >لا إله إلا الله محمد رسول الله</font></marquee>

في هذا الكود يتوقف النص عن الحركة عند التأشير علية بالماوس كما موضح بالمثال، وفى تلك الكود تم إضافة هذا الجزء من الكود ليتوقف عند المرور علية.

"()onmouseover="this.stop()" onmouseout="this.start

يمكنك استخدام هذه الجزئية من الكود في أي مثال مما ذكرنا، والتعديل عليه ليتوقف النص عند ما يمر عليه مؤشر الماوس.



ميزات كود تحريك النص

كود تحريك النص، خفيف ولا يؤثر على سرعة الموقع او المدونة وله عدة خصائص يمكنك التحكم بها للوصول للمظهر الذى تريد لتحريك النص.

يمكنك استخدم كود تحريك النص بإنشاء نص ترحيب لزوار موقعك أو كتابة أيات قرآنية أو كتابة لافتة مهمة تريد ظهورها للزائر، وغيرها الكثير.

استخدم كود تحريك النص في القئمة الجانبية سواء كان موقعك وووردبريس أو مدونة بلوجر فهو لايؤثر على اى شئ فى مظهر الموقع ولا سرعة الموقع كن مطمئن.

يمكنك أستخدامة فى عديد من الأمور، أتمنى ان يكون مقال اليوم عن كيفية إنشاء نص متحرك فى كل الإتجاهات أضاف لك شيئاً جديداً يمكنك الأستفادة منه.


أحصل على أفضل العروض الأن على جميع خدمتنا
Ahmed Alkoptan
بواسطة : Ahmed Alkoptan
أحمد القبطان | أعمل بمجال الكمبيوتر ومصمم مواقع الويب ووردبريس وبلوجر ومؤسس موقع Services Alkoptan Tech لخدمات تطوير وإنشاء الموقع، وعاشق لمجال التقنية والجرافيك.
تعليقات



    حجم الخط
    +
    16
    -
    تباعد السطور
    +
    2
    -