هل سبق لك أن رأيت الحركة المفاجئة لنص التمرير على موقع الويب؟ هل تساءلت يوما كيف تم صنعه؟ لا تحتاج للبحث عن معلومات في مكان آخر! ويسمى هذا النص التمرير سرادق. يمكن صنعه بأي لون ، ويمكن تمريره في أي اتجاه ، وأكثر من ذلك بكثير. انظر الخطوة 1 أدناه للبدء!
- 1 افتح مستند HTML إذا لم تكن قد قمت بذلك بالفعل.
- 2 ضع هذا الكود حيث تريد أن يكون المستطيل:
- 3 حدد لون الخلفية. يمكنك تغيير خلفية الخط الزاحف عن طريق تحديد قيمة ست عشرية (HEX) أو قيمة RGB (أحمر - أخضر - أزرق) بعد "لون الخلفية:" جزء من الكود (لون الخلفية). القيمة الافتراضية أعلاه ، # 000080 هي الأزرق الداكن اللون. يمكن العثور على قائمة كاملة من الألوان ومعانيها.
- 4 اضبط اتجاه التمرير. تغيير السمة اتجاه في رمز أي مما يلي: اليمين (من اليسار إلى اليمين) ، اليسار (من اليمين إلى اليسار (افتراضي)) ، أعلى (من أسفل إلى أعلى) أو لأسفل (من أعلى إلى أسفل).
- 5 اذكر عدد الدورات الجارية لخط الزحف. السمة أنشوطة يمكن تغييره وفقًا للاحتياجات - فهو يتحكم في عدد المرات التي يجب أن يتحرك فيها خط الزحف. إذا كنت تريد أن تتحرك باستمرار ، فقم بتخفيضها.
- 6 حدد نص سطر الزحف. النص الموجود داخل العلامة والعلامة سيتم تمرير النص على سطر الزحف. اكتب ما تريد عرضه.
- 7 تعيين لون النص. إضافة سمة أسلوب الاتصال الهاتفي الداخل
- هنا هو رمز التمرير خط زحف بسيط:
هذا هو خط التمرير التمرير.
- خطوط الزحف على المواقع عادة ما تكون مزعجة بعض الشيء.
- كن حذرا عند تغيير سمات خط الزاحف.
زحف خط على HTML. أساسيات HTML للمبتدئين. الدرس رقم 9
مرحبا بالجميع!
الاستمرار في تعلم أساسيات HTML.
في هذا الدرس سوف أخبر وأعلم كيفية جعل خط الزاحف في وثيقة HTML. هذا نوع من الرسوم المتحركة البدائية على موقع ويب دون استخدام برامج تحرير الرسوم البيانية.
يمكن استخدام خط زاحف لعرض الأخبار والعروض الترويجية ورسائل الإعلان وحتى لحظات التصميم الجميلة (على سبيل المثال: سحابة في السماء تتحرك في رأس الموقع). أعتقد أنك نفسك ستجد تطبيق خط التشغيل على موقعك ، ومهمتي الآن هي إخبارك بكيفية القيام بذلك وكيف يبدو ذلك في الممارسة العملية.
لإنشاء خط زاحف ، استخدم العلامة:
* سمات لخط الزاحف
○ لون الخلفية سرادق
لتلوين خلفية السطر الجاري ، أضف السمة "bgcolor" إلى العلامة "marquee":
النتيجة:
خط الزحف
and ارتفاع وعرض خط التشغيل
لتعيين ارتفاع وعرض خط الزحف ، أضف السمة "width" و "height" إلى علامة التحديد:
line سلوك خط الزاحف
أضف سمة "السلوك" إلى علامة التحديد بالقيم التالية:
التمرير - التمرير العادي (الافتراضي) ،
الشريحة - الخط يبدأ طريقه من حافة ويتوقف عند الطرف الآخر ،
بديل - سينتقل الخط من الحافة إلى الحافة
التمرير العادي (الافتراضي)
سوف يعبر الخط الزاحف من حافة ويتوقف عند حافة أخرى
سينتقل الخط من الحافة إلى الحافة
line اتجاه خط الزاحف
أضف سمة الاتجاه مع القيم التالية إلى علامة التحديد:
اليسار - انقل النص إلى اليسار (افتراضي) ،
اليمين - انقل النص إلى اليمين ،
حركة النص لأعلى من الأسفل إلى الأعلى ،
حركة النص لأسفل من أعلى إلى أسفل
انقل النص إلى اليسار (افتراضي)
حركة النص إلى اليمين
حركة النص من أسفل إلى أعلى
حركة النص من أعلى إلى أسفل
line زحف خط السرعة
لضبط سرعة تحريك خط الزحف ، أضف سمة التمرير إلى علامة التحديد:
كلما زادت القيمة ، زادت السرعة.
line تأخير خط الزاحف
سمة أخرى يمكنك من خلالها ضبط السرعة. كلما زادت القيمة ، انخفضت السرعة. أضف سمة scrolldelay إلى علامة التحديد:
○ عدد القراد
إذا كنت بحاجة إلى تحديد عدد معين من تمريرات خط الزحف ، فأضف سمة الحلقة إلى علامة التحديد:
في المثال ، القيمة هي "2" ، مما يعني أنه سيكون هناك تمريرين فقط.
ind زحف المسافات البادئة
إذا كنت بحاجة إلى تحديد المسافة البادئة على الجانبين الأيمن والأيسر ، أضف السمة "hspace" إلى علامة التحديد:
كيفية إدراج صورة في خط الزاحف
لإدراج خط زاحف في صورة ، أدخل علامة تعرفها بالفعل بين العلامات لعرض الصورة:
جميع سمات العلامة صالحة في هذه الحالة أيضًا.
السمات والمعلمات
1. ث - يضبط عرض الخط الجاري بالبكسل / في المئة. قد يكون هؤلاء الذين يعرفون لغة html على دراية بهذه السمة على سبيل المثال:
- w - يحدد العرض إلى 40٪ اعتمادًا على عرض الكتلة التي يوجد بها الكائن ،
2. الارتفاع = "العدد / النسبة المئوية" - يحدد ارتفاع خط التشغيل بالبكسل / النسبة المئوية. يمكن إعطاء مثال على ذلك كما هو الحال مع السمة الأولى. على سبيل المثال:
- الارتفاع = "400 بكسل" - يحدد الارتفاع إلى 400 بكسل ،
- الارتفاع = "30٪" - يحدد الارتفاع إلى 30٪ اعتمادًا على ارتفاع الكتلة حيث يقع الكائن ،
ملاحظة: إذا كان خط الزحف يتكون من سطر واحد فقط ، فيمكن حذف الارتفاع ، حيث سيتم تحديده تلقائيًا وفقًا لحجم الخط ، والذي تم تعيينه بواسطة حجم الخط: المعلمة Npx.
3. bgcolor = "color" - يضبط لون خلفية الحاوية. يمكنك اختيار لون على الصفحة: أكواد ألوان html. ملاحظة: إذا لم يتم تعيين سمة bgcolor ، فستكون الخلفية هي لون خلفية الصفحة.
4. السلوك = "المعلمة" - هذه هي واحدة من أهم سمات خط التشغيل. يحدد سلوك الخط الزاحف. لديها عدد غير قليل من الخيارات المختلفة:
• بديل - يتحرك خط التشغيل دوريًا: من اليمين إلى اليسار ، ثم من اليسار إلى اليمين (يعمل بين الحواف). على سبيل المثال:
وهكذا يبدو هذا الخط على الموقع:
• انتقل - يتحرك خط الزحف خارج المنطقة في الاتجاه الذي تشير إليه سمة الاتجاه (مع المعلمة) ، ثم يتكرر في دورات. في رأيي ، هذا الخيار هو الأكثر شيوعا. على سبيل المثال:
5. direction = "المعلمات" - يضبط اتجاه حركة خط الزحف. يمكن أن يأخذ القيم التالية:
• لأسفل - حركة من أعلى إلى أسفل. على سبيل المثال:
6. hspace = "number" - يضبط المسافة البادئة للخط الأفقي على كائنات أخرى. تحتوي علامة img الشائعة على سمة مماثلة.
7. vspace = "number" - لتعيين المسافة البادئة الرأسية لكائنات أخرى.
8. حلقة = "رقم" - كم مرة تحتاج إلى التمرير عبر المحتويات. تحدد المعلمة رقمًا ، والذي يحدد عدد التكرارات. ملاحظة: -1 تعني حلقة تمرير لا نهائية. الافتراضي هو -1.
9. scrollamount = "رقم" - سرعة الخط المتحرك. يعين الرقم عدد البكسل الذي يتحرك به الكائن في دورة ساعة واحدة. ملاحظة: السرعة الافتراضية هي 6 بكسل / ثانية. على سبيل المثال:
10. scrolldelay = "number" - يحدد التأخير بين خطوات خط الزحف بالميلي ثانية. على سبيل المثال:
في النهاية سأقدم مثالين على استخدام الخطوط الزاحفة. مثال باستخدام كائن div:
