كيفية إعادة تشغيل الرسوم المتحركة في كل مرة تقوم فيها بالتمرير متجاوزًا عنصرًا باستخدام Divi & GSAP

عندما يتعلق الأمر بتحريك العناصر على صفحتك ، فمن المرجح أنك تريد تنشيط الرسوم المتحركة للعنصر بمجرد دخوله في منفذ العرض. مع إعدادات الرسوم المتحركة المضمنة في Divi ، بمجرد ظهور هذا العنصر ، وتحريكه ، سيظل ثابتًا حتى تعيد تحميل الصفحة بأكملها. في بعض الحالات ، قد تبحث عن نهج أكثر اتساقًا ، حيث يتم إعادة تشغيل الرسوم المتحركة الخاصة بك مع كل إدخال منفذ عرض. سيساعدك القيام بذلك على تبسيط تجربة الزوار على موقع الويب الخاص بك. في هذا البرنامج التعليمي ، سنوضح لك كيفية القيام بذلك بالضبط باستخدام Divi و GSAP و ScrollTrigger for GSAP. بمجرد حصولك على النهج ، ستتمكن من تطبيقه على أي عنصر في صفحتك. ستتمكن من تنزيل ملف JSON مجانًا أيضًا!

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

معاينة

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

سطح المكتب

متحرك

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

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

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

تنزيل مجاني

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

تحميل

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

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

إضافة قسم العنصر النائب

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

تحجيم

قم بتعديل ارتفاع القسم كما يلي:

• الارتفاع: 100 فولت

قسم استنساخ العنصر النائب

ثم استنساخ المقطع مرة واحدة.

أضف مقطعًا جديدًا بين أقسام العناصر النائبة

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

أضف الصف رقم 1

هيكل العمود

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

تحجيم

بدون إضافة وحدات بعد ، افتح إعدادات الصف ، وانتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات الحجم على النحو التالي:

• استخدام عرض مزراب مخصص: نعم
• عرض المزراب: 2
• العرض: 90٪
• العرض الأقصى: 2080 بكسل

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

إضافة محتوى

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

إعدادات النص

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

• خط النص: مونتسيرات
• وزن خط النص: ثقيل
• نمط خط النص: أحرف كبيرة
• لون النص: # f9f9f9
• حجم الخط:
  • سطح المكتب: 150 بكسل
  • الجهاز اللوحي والهاتف: 11vw
• ارتفاع خط النص: 1.1em
• محاذاة النص: الوسط

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

أضف محتوى H2

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

إعدادات نص H2

صمم نص H2 كما يلي:

• خط العنوان 2: مونتسيرات
• العنوان 2 محاذاة النص: الوسط
• حجم نص العنوان 2:
  • سطح المكتب: 80 بكسل
  • الجهاز اللوحي والهاتف: 10vw

تحجيم

أضف عرضًا بنسبة 100٪ أيضًا.

• العرض: 100٪

موقع

وأعد وضع الوحدة بأكملها في علامة التبويب "خيارات متقدمة".

• الموقف: مطلق
• الموقع: المركز

أضف الصف رقم 2

هيكل العمود

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

تحجيم

بدون إضافة وحدات بعد ، افتح إعدادات الصف واضبط إعدادات التحجيم على النحو التالي:

• استخدام عرض مزراب مخصص: نعم
• عرض المزراب: 2
• العرض: 90٪
• العرض الأقصى: 2080 بكسل

إعدادات العمود 1

ثم افتح إعدادات العمود 1.

الصورة الخلفية

قم بتحميل صورة خلفية من اختيارك.

• حجم صورة الخلفية: الغلاف
• موقف صورة الخلفية: المركز

تباعد

قم بتعديل إعدادات تباعد العمود بعد ذلك.

• الحشوة العلوية: 100 بكسل
• الحشوة السفلية:
  • سطح المكتب: 400 بكسل
  • الجهاز اللوحي والهاتف: 200 بكسل
• الحشوة اليسرى: 5.5٪
• الحشوة اليمنى: 5.5٪

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

أضف محتوى H4

بعد ذلك ، أضف وحدة نصية إلى العمود 1 مع بعض محتوى H4.

إعدادات نص H4

صمم نص H4 وفقًا لذلك:

• خط العنوان 4: Lato
• وزن خط العنوان 4: ثقيل
• نمط خط العنوان 4: أحرف كبيرة
• حجم نص العنوان 4: 13 بكسل
• العنوان 4 تباعد الأحرف: 2 بكسل

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

أضف محتوى H3

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

إعدادات نص H3

قم بتغيير إعدادات نص H3 وفقًا لذلك:

• خط العنوان 3: مونتسيرات
• حجم نص العنوان 3: 36 بكسل
• العنوان 3 تباعد الأحرف: 1 بكسل
• العنوان 3 ارتفاع الأسطر: 1.2em

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

إضافة وصف المحتوى

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

إعدادات النص

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

• خط النص: لاتو
• لون النص: # 4c4c4c
• تباعد حروف النص: 0.5 بكسل
• ارتفاع خط النص: 2em

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

أضف نسخة

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

إعدادات الزر

صمم الزر في علامة تبويب التصميم.

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 14 بكسل
• لون نص الزر: #ffffff
• لون خلفية الزر: # 000000
• عرض حد الزر: 0 بكسل

• خط الزر: Lato
• وزن خط الزر: غامق
• نمط خط الزر: أحرف كبيرة

أعد استخدام العمود 1

احذف العمود 2 و 3

بمجرد الانتهاء من العمود 1 وجميع الوحدات النمطية الموجودة بداخله ، يمكنك حذف العمودين المتبقيين من الصف.

عمود الاستنساخ 1 مرتين

وأعد استخدام العمود 1 باستنساخه مرتين.

تغيير صور خلفية العمود المكرر

تأكد من تغيير صورة الخلفية لكل عمود مكرر.

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

جنبا إلى جنب مع محتوى الوحدة.

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

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

• اليسار:
  • سطح المكتب: 50 بكسل
  • الجهاز اللوحي والهاتف: 0 بكسل

2. تطبيق تقنية إعادة تشغيل الرسوم المتحركة على التصميم

أضف فئة CSS إلى الصف رقم 2

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

• فئة CSS: صف الرسوم المتحركة

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

سيساعدنا فصل CSS الذي أضفناه في الخطوة السابقة من هذا البرنامج التعليمي على استهداف جميع الوحدات داخل هذا الصف مرة واحدة. لإنشاء الرسوم المتحركة لإعادة التشغيل ، نستخدم بعض رموز JQuery ومكتبة GSAP JavaScript ومكتبة ScrollTrigger لـ GSAP. لإضافة هذا الرمز ، سنقوم بإدخال وحدة رمز جديدة أسفل وحدة النص الثانية في الصف رقم 1.

إضافة مكتبات GSAP & ScrollTrigger

تأكد من إضافة مكتبات GSAP و ScrollTrigger داخل علامات البرامج النصية الجديدة.

• https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js
• https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js

إضافة علامات نصية جديدة

بعد ذلك ، أضف علامات نصية جديدة أسفل علامات البرنامج النصي للمكتبة.

إضافة وظيفة GSAP + ScrollTrigger

داخل علامات البرنامج النصي الجديدة ، سنقوم بنسخ ولصق الأسطر التالية من كود JQuery:

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

var $module = $('.trigger-animation-row .et_pb_module');

$module.each(function(){
var $thisModule = $(this);

gsap.from($thisModule[0], {
scrollTrigger: {
trigger: this,
start: "bottom bottom",
end: "center top",
scrub: false,
repeat: -1,
toggleActions:'restart none none reset'
},
opacity: 0,
x: -100,
scale: 1.1,
duration: 2,
ease: "back"
});
});
});

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

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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