كيفية إضافة رسوم متحركة نصية متقدمة داخل Divi باستخدام Letterize.js & Anime.js

توفر الرسوم المتحركة المضمنة في Divi الكثير من الاحتمالات عندما يتعلق الأمر بإضافة تلك الميزة الإضافية إلى موقع الويب الخاص بك. ومع ذلك ، تسمح لك هذه الرسوم المتحركة بإضافة رسم متحرك واحد إلى حاوية واحدة في كل مرة. بينما في معظم الحالات يكون هذا عادةً أكثر من كافٍ ، إلا أن هناك مشاريع تريد أن تذهب فيها إلى أبعد من ذلك. قد تجد نفسك ترغب في إضافة رسوم متحركة نصية متقدمة ، على سبيل المثال. في هذا البرنامج التعليمي ، سنوضح لك كيفية القيام بذلك بالضبط. يعد هذا البرنامج التعليمي بمثابة نقطة انطلاق رائعة إذا كنت تريد معرفة كيفية دمج Divi ، كإطار عمل ، مع مكتبات Javascript الخارجية. سننشئ تصميمنا بالكامل باستخدام عناصر وخيارات Divi المضمنة ، ثم نستهدف وحدة النص الخاصة بنا باستخدام مكتبات letterize.js و anime.js لإنشاء رسوم متحركة نصية متقدمة. بمجرد فهمك للمنهج ، ستتمكن من إنشاء أي نوع من الرسوم المتحركة النصية المتقدمة التي يمكنك تخيلها!

دعنا نذهب اليها!

معاينة

قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

قم بتنزيل مخطط الرسوم المتحركة للنص المتقدم مجانًا

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

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

تنزيل مجاني

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

تحميل

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

1. إنشاء تصميم قسم البطل

إضافة قسم جديد

تباعد

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

• الحشوة العلوية: 180 بكسل (سطح المكتب) ، 100 بكسل (جهاز لوحي) ، 50 بكسل (هاتف)
• الحشو السفلي: 180 بكسل (سطح المكتب) ، 100 بكسل (جهاز لوحي) ، 50 بكسل (هاتف)

أضف الصف رقم 1

هيكل العمود

تابع بإضافة صف جديد باستخدام بنية العمود التالية:

تباعد

بدون إضافة أي وحدات بعد ، افتح إعدادات الصف وقم بإزالة جميع الحشوة السفلية الافتراضية.

• الحشو السفلي: 0 بكسل

أضف وحدة نصية # 1 إلى العمود

أضف نسخة H1

الوحدة الوحيدة التي نحتاجها في هذا الصف هي وحدة نصية. أضف بعض محتوى H1 من اختيارك.

إعدادات نص H1

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

• خط العنوان: مونتسيرات
• لون نص العنوان: rgba (232،232،232،0.41)
• حجم نص العنوان: 80 بكسل (سطح المكتب) ، 50 بكسل (جهاز لوحي) ، 40 بكسل (هاتف)
• تباعد حروف العنوان: -10 بكسل (سطح المكتب) ، -4 بكسل (الجهاز اللوحي) ، -3 بكسل (الهاتف)
• ارتفاع خط العنوان: 0.6em (سطح المكتب) ، 0.7em (الجهاز اللوحي) ، 0.8em (الهاتف)

أضف الصف رقم 2

هيكل العمود

أضف صفًا آخر أسفل الصف السابق مباشرةً باستخدام بنية العمود التالية:

تحجيم

افتح إعدادات الصف وقم بتغيير الحد الأقصى للعرض في إعدادات التحجيم.

• العرض الأقصى: 1680 بكسل

تباعد

قم بإزالة كل الهامش السفلي والحشو التالي.

• الهامش السفلي: 0 بكسل
• الحشو السفلي: 0 بكسل

أضف وحدة الصورة النمطية إلى العمود

تحميل الرسم التوضيحي

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

تحجيم

انتقل إلى علامة تبويب تصميم الوحدة وفرض العرض الكامل على الصورة.

• فرض عرض كامل: نعم

تباعد

أضف بعض الهامش السفلي السلبي بعد ذلك.

• الهامش السفلي: -12٪

حيوية

وأكمل إعدادات الوحدة بإضافة إعدادات الرسوم المتحركة التالية:

• نمط الرسوم المتحركة: تتلاشى
• تأخير الرسوم المتحركة: 3000 مللي ثانية

أضف الصف رقم 3

هيكل العمود

إلى الصف التالي والأخير. استخدم هيكل العمود التالي:

تباعد

انتقل إلى علامة تبويب تصميم الصف وأضف بعض قيم الحشو المخصصة.

• حشوة علوية: 10٪
• حشوة سفلية: 5٪
• الحشوة اليسرى: 3٪
• الحشوة اليمنى: 3٪

مربع الظل

ثم ، قم بتمكين ظل مربع دقيق.

• مربع قوة طمس الظل: 80 بكسل
• لون الظل: rgba (0،0،0،0.06)

حيوية

وأكمل إعدادات الصف بإضافة الرسوم المتحركة التالية:

• نمط الرسوم المتحركة: تتلاشى
• تأخير الرسوم المتحركة: 3000 مللي ثانية

أضف وحدة نصية رقم 2 إلى العمود

إضافة محتوى

حان الوقت لإضافة الوحدات. الوحدة الأولى التي نحتاجها هي وحدة نصية مع بعض محتوى الوصف.

إعدادات النص

انتقل إلى علامة تبويب تصميم الوحدة وقم بتعديل إعدادات النص وفقًا لذلك:

• خط النص: لاتو
• حجم النص: 18 بكسل
• تباعد حروف النص: 1 بكسل
• ارتفاع خط النص: 2.7em

أضف وحدة الزر إلى العمود

أضف نسخة

آخر وحدة نحتاجها هي وحدة الأزرار. أدخل نسخة من اختيارك.

إعدادات الزر

انتقل إلى علامة تبويب تصميم الوحدة وقم بتغيير إعدادات الزر على النحو التالي:

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 16 بكسل
• لون نص الزر: # 171cff
• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 0 بكسل

• زر الخط: مونتسيرات
• نمط خط الزر: أحرف كبيرة

تباعد

بعد ذلك ، قم بتطبيق قيم المساحة المتروكة التالية داخل إعدادات التباعد:

• حشوة علوية: 2٪
• حشوة سفلية: 2٪
• الحشوة اليسرى: 5٪
• الحشوة اليمنى: 5٪

مربع الظل

أكمل إعدادات الوحدة بإضافة ظل الصندوق التالي:

• مربع الظل الرأسي: 5 بكسل
• قوة انتشار الظل المربع: -2 بكسل
• لون الظل: # 171cff

2. إضافة فئة CSS إلى العنوان

افتح وحدة النص # 1 وانقر على علامة تبويب النص

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

أضف معرف CSS إلى علامة H1

داخل H1 أضف معرف CSS مخصصًا.

• المعرف = "headlineCopy"

3. إضافة Letterize & Anime Libaries

أضف وحدة التعليمات البرمجية إلى العمود

لإنشاء الرسوم المتحركة ، نستخدم مكتبات letterize.js و anime.js. لإضافة هذه المكتبات ، أدخل وحدة رمز جديدة في عمود الصف الأخير.

أضف كلا المكتبتين

بعد ذلك ، أضف علامتي نص برمجي مختلفتين تحتويان على المصادر التالية التي تؤدي إلى المكتبات:

• src = ”https://cdn.jsdelivr.net/gh/WojciechWKROPCE/letterize-js/lib/letterize.min.js"
• src = ”https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"

4. إضافة رمز الرسوم المتحركة

الرسوم المتحركة للرسالة على المستوى الفردي

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

jQuery(function($){
$(document).ready(function(){

var headlineCopy = new Letterize({
targets: "#headlineCopy"
});

var animation = anime.timeline({
targets: '#headlineCopy span',
delay: anime.stagger(20),
loop: false
});

animation
.add({
opacity: [0, 1],
scale: [0, 1.2, 1],
duration: 1500,
elasticity: 600,
color: '#000',
})

.add({
color: '#00FFF7',
})

.add({
color: '#D2BEFB',
})

.add({
color: '#171cff',
});

});
});

تمثل كل وظيفة إضافة رسمًا متحركًا في مخطط زمني للرسوم المتحركة. تنطبق هذه الرسوم المتحركة على كل حرف على المستوى الفردي. يمكنك تعديل هذه الوظائف الإضافية كما تريد ، أو إضافة وظائف جديدة أو إزالة الوظائف الحالية ، فقط تأكد من إغلاق وظيفة الإضافة الأخيرة بشكل صحيح باستخدام "؛" في النهاية (كما ترى في الكود أعلاه). يمكنك إضافة خصائص CSS مختلفة داخل وظائف الإضافة هذه. يمكنك معرفة المزيد عن الخصائص وكيفية استخدامها في أمثلة توثيق anime.js. في هذا البرنامج التعليمي ، أضفنا عن قصد العديد من الرسوم المتحركة لإظهار كيفية عمل الجدول الزمني ، ولكنك على الأرجح سترغب في استخدام شيء أكثر دقة أو أقصر لمشاريعك الخاصة.

الرسوم المتحركة للجملة

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

anime.timeline({loop: false})

.add({
targets: '#headlineCopy',
lineHeight: '1em',
delay: '1500'

})

.add({
targets: '#headlineCopy',
translateX: ['-5%', 0],
letterSpacing: '-2px',
});

أضف CSS مخصص لـ Span

الآن ، نظرًا لأننا أنشأنا مسافة منفصلة لكل حرف من أحرفنا ، فسنحتاج إلى تغيير خاصية العرض لكل امتداد للسماح للأحرف بالظهور بجانب بعضها البعض. للقيام بذلك ، سنضيف بعض أكواد CSS إلى وحدة التعليمات البرمجية الخاصة بنا. تأكد من وضع الشفرة بين علامات النمط.

#headlineCopy span {
display: inline-block;
}

معاينة

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

افكار اخيرة

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

إذا كنت حريصًا على معرفة المزيد عن Divi والحصول على المزيد من هدايا Divi المجانية ، فتأكد من الاشتراك في النشرة الإخبارية للبريد الإلكتروني وقناة YouTube حتى تكون دائمًا من أوائل الأشخاص الذين يعرفون هذا المحتوى المجاني ويحصلون عليه.