الخطوط هي وسيلة رائعة للتعبير عن شخصيتك والإبداع. ومع ذلك ، في بعض الأحيان لا تبدو الخيارات القياسية مثيرة للاهتمام بما فيه الكفاية ولا تجذب الانتباه. في مثل هذه الحالات ، يمكنك استخدام تقنيات خاصة تساعد في جعل الخط أكثر جاذبية ولا ينسى.
إحدى هذه الطرق هي جعل الخط يزحف بعينيك. هذا يعني أن كل حرف سيكون له تأثير حركة من شأنه أن يخلق وهم العيون المنزلقة. غالبا ما تستخدم هذه التقنية في التصميم والإعلان للفت الانتباه إلى النص.
كس الرسوم المتحركة يمكن استخدامها لخلق تأثير الخط الزاحف. أولا ، تحتاج إلى تحديد الخط المناسب وتثبيته على موقع الويب الخاص بك أو في مستند. ثم ، باستخدام رمز كس ، يمكنك تحديد الرسوم المتحركة الحركة التي سيتم تطبيقها على كل حرف.
على سبيل المثال ، يمكنك تعيين خاصية اسم الرسوم المتحركة للنص وتحديد الرسوم المتحركة التي سيتم تشغيلها. بعد ذلك ، باستخدام خاصية مدة الرسوم المتحركة ، يمكنك تعيين مدة الرسوم المتحركة ، وباستخدام خاصية وظيفة توقيت الرسوم المتحركة ، يمكنك ضبط اتجاه وضع الحركة.
ستجعل هذه الطريقة البسيطة النص الخاص بك أكثر فعالية وجاذبية للقراء أو المشاهدين. من خلال اللعب مع الخطوط والرسوم المتحركة الخاصة بهم ، يمكنك إنشاء تصاميم فريدة لا تنسى من شأنها أن تبرز من الآخرين.
- إنشاء تأثير الخط الزاحف
- أدوات للعمل
- اختيار الخط المناسب
- فتح مستند هتمل
- إضافة أنماط لتأثير زاحف
- ضبط سرعة حركة الخط
- حفظ وعرض النتيجة
إنشاء تأثير الخط الزاحف
نموذج التعليمات البرمجية:
النص الذي سوف الزحف مع عينيك |
.
وبالتالي ، باستخدام جدول بيانات ورسوم متحركة كس ، يمكنك بسهولة إنشاء تأثير خط الزحف على موقع الويب الخاص بك.
أدوات للعمل
لإنشاء تأثير الخط الزاحف مع عينيك ، سوف تحتاج إلى الأدوات التالية:
1. محرر نصوص
لكتابة الكود وإجراء التغييرات اللازمة على بنية هتمل لصفحة الويب الخاصة بك ، تحتاج إلى استخدام محرر نصوص. يمكن أن يكون هذا أي محرر يوفر تمييز بناء جملة هتمل والقدرة على حفظ الملفات فيه .تنسيق هتمل.
2. أنماط المغلق
لإنشاء تأثير الخط الزاحف مع عينيك ، تحتاج إلى تطبيق أنماط كس إلى العنصر المقابل. اعتمادا على التأثير المطلوب ، يمكن استخدام العديد من خصائص كس والرسوم المتحركة.
3. جافا سكريبت
لإضافة التفاعل والرسوم المتحركة إلى الخط الزحف مع عينيك ، تحتاج إلى استخدام جافا سكريبت. باستخدام جافا سكريبت ، يمكنك التحكم في الوضع الحالي للعيون في الخط والتعامل مع الأحداث التي تحرك العينين في اتجاه معين.
4. المتصفح
لمعرفة تأثير الخط الزحف مع عينيك في العمل ، وسوف تحتاج إلى فتح صفحة ويب في متصفح متوافق. تحقق مما إذا كان المتصفح المحدد يدعم الوظائف المطلوبة ، مثل الرسوم المتحركة كس وجافا سكريبت ، لعرض التأثير بشكل صحيح.
عند استخدام هذه الأدوات ، ستتمكن من إنشاء تأثير خط يزحف بالعين على صفحة الويب الخاصة بك.
اختيار الخط المناسب
عند اختيار خط للزحف إلى النص ، من المهم مراعاة عدة عوامل:
- سهولة القراءة: يجب أن يكون الخط قابلا للقراءة بدرجة كافية بحيث يمكن قراءة النص الموجود على الموقع بسهولة.
- التفرد: اختر خطا يختلف عن الخطوط النموذجية لإنشاء تأثير نص زاحف. حاول استخدام الخطوط ذات الخطوط المائلة أو الخطوط ذات الأشكال غير القياسية.
- التوافق: تأكد من أن الخط المحدد متوافق مع جميع الأجهزة والمتصفحات. تحقق من عرضه على دقة الشاشة المختلفة وعلى أنظمة التشغيل المختلفة.
- نمط: ضع في اعتبارك النمط العام لموقعك عند اختيار الخط. يجب أن يكون في وئام مع التصميم ونقل المشاعر والمزاج الصحيح.
نقترح أيضا أن تتعرف على مجموعة من الخطوط المجانية المصممة خصيصا لإنشاء تأثيرات نصية متحركة وزحف. سيساعد عنصر الرسوم المتحركة الذي تم إنشاؤه بواسطة هذه الخطوط في إنشاء تأثيرات بصرية مذهلة على موقع الويب الخاص بك.
فتح مستند هتمل
- افتح محرر نصوص مثل المفكرة أو النص السامي.
- إنشاء ملف جديد.
- . تشير هذه العلامة إلى أن الملف هو مستند هتمل.
- . يجب أن يكون المحتوى الكامل لمستند هتمل بين هذه العلامات.
- . تحتوي هذه الكتلة على بيانات وصفية وروابط لملفات ونصوص أنماط خارجية.
- . داخل هذه العلامات ، يمكنك تحديد عنوان الصفحة الذي سيتم عرضه في نافذة المتصفح.
- . تحتوي هذه الكتلة على محتوى الصفحة الذي سيكون مرئيا للمستخدم.
هنا مثال على وثيقة هتمل:
مرحبا ، العالم!
هذه هي أول صفحة ويب لي.
إضافة أنماط لتأثير زاحف
لإنشاء تأثير زاحف للنص ، سنحتاج إلى أنماط كس. يظهر الرمز أدناه مثالا على الأنماط التي يمكن استخدامها:
في هذا المثال ، نستخدم محدد م لتحديد عنصر النص الذي نريد تطبيق تأثير الزاحف عليه. يمكنك استبدالها بأي علامة أو فئة أخرى ، حسب احتياجاتك.
بعد ذلك ، نحدد رسما متحركا يسمى نص الزحف. قمنا بتعيين مدة الرسوم المتحركة على 8 ثوان ، ونحدد أنه يجب تكرار الرسوم المتحركة إلى أجل غير مسمى ، ونحدد أن اتجاه الرسوم المتحركة يجب أن يتغير بترتيب عكسي عند كل تكرار.
داخل الرسوم المتحركة ، نستخدم تحويل: ترانسلاتكس () لتحريك النص على طول المحور الأفقي. تشير القيمة 0 بكسل إلى موضع البداية للنص ، وتشير القيمة 100 ٪ إلى أنه يجب نقل النص بنسبة 100 ٪ بالنسبة لعرض الأصل. هذا يخلق تأثير الزحف النص.
يمكنك تجربة قيم مختلفة لتحقيق تأثير الزحف المطلوب. تذكر أيضا أنه يمكنك تطبيق هذه الأنماط على عناصر مختلفة في صفحتك ، وليس النص فقط.
ضبط سرعة حركة الخط
عند إنشاء خط الزحف ، من المهم أن تأخذ في الاعتبار سرعة حركته. يمكن تغيير السرعة باستخدام التصميم المغلق.
لتغيير سرعة حركة الخط ، يمكنك استخدام خاصية الرسوم المتحركة في كس. نموذج التعليمات البرمجية:
@إطارات مفتاحية الزحف {