كيفية تكديس وتحريك النص باستخدام تأثيرات Divi Scroll

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

تحقق من ذلك!

نظرة خاطفة

فيما يلي نظرة سريعة على الرسوم المتحركة النصية التي سنقوم ببنائها في هذا البرنامج التعليمي.

اشترك في قناتنا على اليوتيوب

قم بتنزيل Layout مجانًا

لتضع يديك على التصميمات من هذا البرنامج التعليمي ، ستحتاج أولاً إلى تنزيلها باستخدام الزر أدناه. للوصول إلى التنزيل ، ستحتاج إلى الاشتراك في قائمة البريد الإلكتروني Divi Daily الخاصة بنا باستخدام النموذج أدناه. بصفتك مشتركًا جديدًا ، ستتلقى المزيد من مزايا Divi وحزمة Divi Layout المجانية كل يوم اثنين! إذا كنت موجودًا بالفعل في القائمة ، فما عليك سوى إدخال عنوان بريدك الإلكتروني أدناه والنقر فوق تنزيل. لن يتم "إعادة اشتراكك" ولن تتلقى رسائل بريد إلكتروني إضافية.

قم بتنزيل الملفات

تنزيل مجاني

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

تحميل

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

لاستيراد التخطيط إلى صفحتك ، ما عليك سوى استخراج ملف مضغوط واسحب ملف JSON إلى Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، أليس كذلك؟

ما تحتاجه للبدء

للبدء ، سوف تحتاج إلى القيام بما يلي:

1. إذا لم تكن قد قمت بذلك بعد ، فقم بتثبيت وتفعيل Divi Theme.
2. قم بإنشاء صفحة جديدة في WordPress واستخدم Divi Builder لتحرير الصفحة على الواجهة الأمامية (منشئ مرئي).
3. اختر الخيار "البناء من الصفر".

بعد ذلك ، سيكون لديك لوحة فارغة لبدء التصميم في Divi.

كيفية تكديس وتحريك النص في Divi

إنشاء القسم والصف

أولاً ، قم بإنشاء صف من عمود واحد للقسم العادي.

إعدادات القسم

قبل إضافة أي وحدات نمطية ، افتح إعدادات القسم وقم بتحديث ما يلي:

• لون الخلفية: rgba (201،245،255،0.35)
• الحشو: 14vw أعلى ، 14vw أسفل

إعدادات الصف

بعد ذلك ، افتح إعدادات الصف وقم بتحديث ما يلي:

• العرض الأقصى: 60٪
• محاذاة الصف: الوسط
• الارتفاع: 20vw

نقوم بتعيين الارتفاع على قيمة محددة لأننا سنقوم بوضع وحدات النص داخل الصف تمامًا.

إضافة وحدات النص المكدسة التي تتحرك أثناء التنزه

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

لنبدأ بإضافة وحدة النص بالعنوان الرئيسي.

أضف وحدة نصية # 1

أضف وحدة نصية جديدة إلى الصف.

ثم قم بتحديث وحدة النص بالمحتوى التالي.

<h2><span style="color: rgba(83,144,193,0.1)">D</span>esign</h2>
that jumps off the page

• خط النص: خط شعري بنجي
• وزن خط النص: غامق
• حجم نص النص: 4vw
• ارتفاع خط النص: 1.5em
• خط العنوان 2: الظل بنجي
• وزن خط العنوان 2: غامق
• لون نص العنوان 2:
• حجم نص العنوان 2: 12vw
• العرض: 100٪

• الموقف: مطلق

أضف وحدة نصية # 2

سيتم استخدام وحدة النص التالية كأول حرف لتداخل الحرف الأول من العنوان. لبدء تصميم وحدة النص ، قم بتكرار أول وحدة نصية.

ثم قم بتحديث محتوى وحدة النص المكرر بالحرف الأول من نص العنوان ("D").

ثم قم بتحديث إعدادات التصميم على النحو التالي:

• خط النص: بنجي الظل
• وزن خط النص: غامق
• لون نص النص: rgba (83،144،193،0.3)
• حجم نص النص: 12vw
• ارتفاع خط النص: 1em

تأثيرات التمرير

وحدة النص التي تحتوي على الحرف "D" مكدسة الآن مباشرة أعلى الحرف "D" في وحدة النص الأولى. سنقوم بتحريك الحرف قليلاً عند التمرير باستخدام مزيج من الحركة الرأسية والأفقية.

الحركة العمودية

ضمن علامة التبويب خيارات متقدمة ، حدد علامة تبويب الحركة العمودية وقم بتحديث ما يلي:

• تمكين الحركة العمودية: نعم
• تعويض البدء: 0 (عند 20٪)
• الإزاحة الوسطى: -0.5 (بين 40٪ و 60٪)
• إزاحة النهاية: 0 (عند 80٪)

إذا كنت جديدًا في خيارات تأثير التمرير في Divi ، فإن أعلى قيم النسبة المئوية تشير إلى نقاط الموقع داخل نافذة المتصفح. كل قيمة نسبة مئوية تتوافق مع التعويضات أدناه (البداية ، الوسط ، والنهاية). لذلك ، أثناء قيام المستخدم بالتمرير ، سيبدأ الحرف "D" في الحركة (من إزاحة البداية "0") عندما يصل إلى 20٪ من أسفل منفذ العرض. ستستمر في الحركة (لأعلى) حتى تصل إلى 40٪ من أسفل منفذ العرض ثم تثبت عند الإزاحة "-0.5" حتى تصل إلى 60٪ من أسفل منفذ العرض. بمجرد وصوله إلى نقطة 60٪ ، سيبدأ الرسم المتحرك مرة أخرى إلى الإزاحة الأصلية "0" ويتوقف عن الحركة عندما يصل إلى 80٪ من أسفل منفذ العرض.

الحركة الأفقية

لإعطاء وحدة النص حركة أفقية ، حدد علامة تبويب الحركة الأفقية وقم بتحديث ما يلي (ستكون القيم مماثلة للحركة الرأسية):

• تمكين الحركة الأفقية: نعم
• تعويض البدء: 0 (عند 20٪)
• الإزاحة الوسطى: -0.5 (بين 40٪ و 60٪)
• إزاحة النهاية: 0 (عند 80٪)

أضف وحدة نصية # 3

أنشئ وحدة النص الثالثة (أو الحرف "D") عن طريق تكرار وحدة النص السابقة.

تحديث تأثيرات التمرير

ثم قم بتحديث تأثيرات التمرير التالية.

الحركة العمودية

• الإزاحة الوسطى: -1

الحركة الأفقية

• الإزاحة الوسطى: 1

تحديث لون النص

قم بتحديث لون النص كما يلي:

• لون نص النص: rgba (83،144،193،0.5)

أضف وحدة نصية # 4

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

تحديث لون النص

قم بتحديث لون النص كما يلي:

• لون نص النص: # 5390c1

تحديث تأثيرات التمرير

ثم انتقل إلى علامة التبويب خيارات متقدمة واضبط تأثيرات التمرير على النحو التالي:

الحركة العمودية

• الإزاحة الوسطى: -1.5

الحركة الأفقية

• الإزاحة الوسطى: 1.5

أضف هامشًا إلى قسم للاختبار

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

• الهامش: 40vw أعلى ، 40vw أسفل

النتيجة النهائية

الآن يمكننا أخيرًا التحقق من النتيجة النهائية على صفحة مباشرة.

ها هو على الهاتف المحمول.

لا تتردد في تجربة الخطوط المختلفة باستخدام ميزة البحث والاستبدال الخاصة بـ Divi.

افكار اخيرة

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

ولنفكر في الأمر ، فإن هذا المفهوم نفسه سيعمل مع الصور والأيقونات أيضًا.

أتطلع إلى تلقي رد منك في التعليقات أدناه.

هتافات!