طريقة عمل نص متحرك

موضوع اليوم كما هو واضح من العنوان انه عن اضافة متحركة تشابه بعض الشيء موضوع "طريقة عمل شريط اخباري لمدونتك" من ناحية ان الشريط المتحرك كما ذكرنا انه عبارة عن روابط نصيه متحركة وموضوع اليوم يشرح طريق عمل نص متحرك فقط بدون روابط ، قد تستخدمه لوضع رسالة ترحيب للزوار او خبر عن موضوع معين او اي شيء تريد كتابته ليراها الزوار بشكل ظريف ومتحرك .

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

اولا : نبدأ بـ "بسم الله الرحمن الرحيم" ثم نشرح الكود للنص المتحرك وهو ما يسمى بكود marquee

ضع النص الذي تريده هنا

وهذا هو الكود :

<marquee scrolldelay="200" width="300px" height="25px" direction="right" bgcolor="#3BB9FF"><font color="#000000" >ضع النص الذي تريده هنا</font></marquee>

  

1.      كلمة scrolldelay تعني سرعة تحرك النص هنا تجد السرعة 200 وبإمكانك التحكم فيها كما تشاء

ملحوظه : كلما قلة قمية السرعة كلما كانت حركة النص اسرع (50 اسرع من 100)

2.      كلمة width تعني عرض الصندوق الذي سيحتوي على النص ويمكن التحكم فيه عبر تغيير قيمته الموجودة هنا في الكود بـ 300

3.      كلمة height تعني طول الصندوق الذي سيحتوي على النص ويمكن التحكم فيه عبر تغيير قيمته الموجودة هنا في الكود بـ 25

4.      كلمة direction تعني ان حركة النص ستتجه من اليسار إلى اليمين ويمكنك التحكم في الاتجاه كما ذكرنا في اول الموضوع في اي اتجاه عن طريق تغيير القيمة الموجود وهي right إلى مثلا :

*     من اليمين الي اليسار ضع كلمة left

*     من أعلى إلى اسفل ضع كلمة down

*     من اسفل إلى أعلى ضع كلمة up

5.      كلمة bgcolor تعني لون خلفية النص او الصندوق الذي يحتوي علية النص ويمكنك اختيار ما يناسبك من الالوان بتغيير كود اللون الموجود في الكود وهو #3BB9FF

6.      كلمة font color تعني لون الخط اي لون النص الذي سوف تكتبه وأيضا تستطيع اختيار ما يناسبك بتغيير كود اللون هذا #000000

ويمكنك اختيار الألوان التي تناسبك من "جدول أسماء و أكواد الالوان"

وألان نبدأ بمشاهدة أمثلة على الأشكال المختلفة :

-          النص يتحرك من اليمين إلى اليسار :

بسم الله الرحمن الرحيم

وها هو الكود :

<marquee scrolldelay="200" width="300px" height="25px" direction="left" bgcolor="#3BB9FF"><font color="#000000" > بسم الله الرحمن الرحيم </font></marquee>

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

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

وها هو الكود :

<marquee behavior="alternate" width="300px" height="25px" direction="right" bgcolor="#3BB9FF"><font color="#000000" > سبحان الله وبحمده سبحان الله العظيم </font></marquee>

  

والجديد في هذا الكود هو هذا الجزء behavior="alternate"

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

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

وها هو الكود :

<marquee scrolldelay="200" width="200px" height="300px" direction="down" bgcolor="#3BB9FF"><font color="#000000" >لا إله إلا الله محمد رسول الله</font></marquee>

   

ويمكنك تغيير الاتجاه إلى العكس (من أسفل إلى أعلى) كما ذكرنا بتغيير كلمة down بكلمة up

-          ونأتي لأهم كود من بين تلك الاكواد :

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

وها هو الكود :

<marquee scrolldelay="200" onmouseover="this.stop()" onmouseout="this.start()" width="200px" height="300px" direction="up" bgcolor="#3BB9FF"><font color="#000000" > لا اله الإ انت سبحانك اني كنت من الظالمين </font></marquee>

والذي يميز هذا الكود هو توقف النص عند وقف مؤشر الفأره (الماوس) عليه كما تراه في المثال السابق ، والاختلاف هنا يكمن في هذا الجزء onmouseover="this.stop()" onmouseout="this.start()"

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

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

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

وتمنياتي للجميع بالتوفيق