يعد إنشاء رسوم متحركة لخلفية النص طريقة فريدة لإضافة مواد متحركة ملونة إلى النص الخاص بك. موقع انترنت أثناء قيام المستخدم بتمرير الصفحة. مع Divi، فإن العملية سهلة بشكل مدهش بمجرد أن تتعلم بعض التقنيات الأساسية.
في هذا البرنامج التعليمي ، سنستخدم فقط قوة المعلمات المضمنة في Divi لإنشاء 3 تصميمات فريدة تتميز بخلفية نصية ملونة متحركة متحركة. سنوضح لك أيضًا كيفية إنشاء نسخة داكنة من كل تصميم للحصول على مظهر جديد تمامًا.
دعونا نبدأ!
النتيجة المحتملة
إليك نظرة على التصميمات التي سنبنيها اليوم.
التصميم 1: تدرج خلفية النص مع تأثير التمرير الأفقي
سيحتوي هذا التصميم الأول على تأثير التمرير الأفقي الذي يحرك وحدة فاصلة ملونة خلف وحدة نصية باستخدام مرشح الشاشة.
أضف عمودًا
للبدء ، أضف صفًا من عمود واحد إلى القسم الافتراضي.
أضف وحدة نصية
ثم أضف وحدة نصية جديدة إلى العمود.
محتويات
ل محتويات من العمود، قم بلصق كود HTML التالي في المربع محتويات:
تنسيق النص
ثم قم بتحديث تصميم النص كما يلي:
- لون الخلفية: #ffffff
- نمط خط النص: TT
- لون النص: # 000000
- حجم النص: 100 بكسل (سطح المكتب) ، 40 بكسل (الهاتف)
- تباعد الحروف النصية: 0.15em
- ارتفاع سطر النص: 1em
- محاذاة النص: المركز
- خط العنوان: Merriweather
- وزن خط العنوان: غامق
- نمط خط العنوان: TT
- محاذاة نص الرأس: الوسط
- لون نص الرأس: # 000000
- حجم نص الرأس: 200 بكسل (سطح المكتب) ، 80 بكسل (الهاتف)
- تباعد رسالة العنوان: 0.15em
- ارتفاع سطر العنوان: 1em
الحشو والتصفية
الآن نحن بحاجة إلى إضافة بعض المساحة المتروكة وفلتر الشاشة إلى وحدة النص. المرشح ضروري لهذا التصميم للعمل لأنه يسمح لألوان الخلفية / التعديلات بالظهور خلف النص.
لإضافة تعبئة وتصفية ، قم بتحديث ما يلي:
- المساحة المتروكة: 15 بكسل عالية ، 20 بكسل منخفضة
- وضع المزج: الشاشة
ملاحظة: يعمل وضع مزج الشاشة بشكل أفضل مع النص الأسود على خلفية بيضاء. إذا أردنا استخدام نص أبيض على خلفية سوداء ، فسنستخدم وضع المزج Multiply.
فاصل علوي وسفلي
بمجرد اكتمال وحدة النص لدينا ، دعنا نضيف بعض الفواصل (أعلاه وواحدة أسفل وحدة النص) لعنصر تصميم إضافي.
أضف فاصل سفلي
أضف وحدة فصل جديدة تحت وحدة النص.
إعدادات فصل أعلى
افتح إعدادات الفاصل وحدد لا لعرض الفاصل.
ثم قم بتحديث الخلفية ومنح الحاجز نفس وضع المزج مثل وحدة النص كما يلي:
- لون خلفية التدرج الأيسر: # 000000
- لون خلفية التدرج على اليمين: #ffffff
- اتجاه التدرج: 90deg
- موضع البدء: 48٪
- الموضع النهائي: 0٪
- وضع المزج: الشاشة
ثم قم بتحديث ارتفاع الحاجز على شاشة الهاتف كالتالي:
- الارتفاع: 15 بكسل (الهاتف)
أضف الفاصل العلوي
لإنشاء الحاجز العلوي ، قم بتكرار الحاجز السفلي السابق واسحبه فوق وحدة النص باستخدام منطقة عرض الطبقات.
ثم اقلب الألوان على خلفية التدرج.
تحديث معلمات الخط
بمجرد وضع الفواصل العلوية والسفلية في مكانها ، قم بتحديث معلمات الخط على النحو التالي:
- عرض الحضيض: 1 (لإزالة الهوامش السفلية بين الوحدات)
- العرض الأقصى: 600 بكسل (للحفاظ على تصميم متماسك على سطح المكتب والجهاز اللوحي)
- محاذاة الخط: الوسط
- الحشو: 0px عالية ، 0px منخفضة
- تجاوز أفقي: مخفي
- تجاوز عمودي: مخفي
قم بإنشاء فاصل للون خلفية النص المتحرك
العنصر الأخير في هذا التصميم الأول هو الحاجز الذي سنستخدمه لتحريك لون خلفية النص في التمرير. للقيام بذلك ، أضف وحدة فصل جديدة تحت الحاجز السفلي.
ثم حدد "لا" لعرض الفاصل.
إعدادات مقسم الخلفية
قم بتحديث الفاصل بخلفية متدرجة على النحو التالي:
- لون خلفية التدرج الأيسر: # e02b20
- لون تدرج الخلفية اليمنى: # 8300e9
- اتجاه التدرج: 90deg
- موضع البدء: 30٪
- الموضع النهائي: 70٪
نريد أن يكون ارتفاع الفاصل مرتفعًا بدرجة كافية لتلوين كل نصنا في وحدة النص والفواصل العلوية والسفلية. لهذا التصميم ، اضبط الارتفاع على 400 بكسل.
- الارتفاع: 400px
ثم امنح الحاجز موقعًا مطلقًا لوضعه مباشرة فوق الوحدات الأخرى. استخدم الفهرس Z لوضع الحاجز خلف الوحدات الأخرى.
- المنصب: مطلق
- مؤشر Z: -1
تأثيرات تمرير مقسم الخلفية
مع وجود الفاصل في موضعه، كل ما يتعين علينا فعله هو تحريك الفاصل خلف النص باستخدام تأثيرات التمرير Divi. بالنسبة لهذا التصميم، سنقوم ببساطة بإضافة حركة أفقية على التمرير.
تحديث العناصر التالية:
تحت علامة تبويب الحركة الأفقية ...
مكتب
- تنشيط الحركة الأفقية: نعم
- إزاحة البدء: 6 (بنسبة 20٪)
- متوسط الإزاحة: 0 (عند 40٪ -60٪)
- تعويض النهاية: -6 (بنسبة 80٪)
الهاتف
- تعويض البداية: 3
- تعويض النهاية: -3
تأكد أيضًا من ضبط الزناد لتأثير الحركة في منتصف المقطع:
- تأثير حركة الزناد: منتصف العنصر
إضافة تباعد القسم
لإنشاء مساحة تمرير مؤقتة لاختبار التصميم ، أضف ما يلي إلى القسم:
- الهامش: 80vh أعلاه ، 80vh أدناه
الأفكار النهائية
ستعمل تصميمات الرسوم المتحركة لخلفية النص الموضحة في هذه المقالة بشكل جيد كتصميم ثابت بدون حركة الإضافة في التمرير. ومع ذلك ، فإن تأثيرات التمرير الإضافية تأخذ التصميم حقًا إلى مستوى جديد تمامًا. لا تتردد في تجربة المزيد من الألوان والتأثيرات!
لا أطيق الانتظار لسماع ردك في التعليقات.
لصحتك!