كيفية تحويل التصميم الخاص بك مع سرعة التمرير باستخدام Divi & GSAP

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

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

معاينة

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

الانحراف العمودي

سطح المكتب

متحرك

الانحراف الأفقي

سطح المكتب

متحرك

استدارة

سطح المكتب

متحرك

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

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

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

تنزيل مجاني

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

تحميل

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

ما نستخدمه

• ديفي
• GSAP
• ScrollTrigger لـ GSAP
• عرض ScrollTrigger

1. بناء هيكل العنصر

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

خلفية متدرجة

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

• اللون 1: # 162c2d
• اللون 2: # 122223
• نوع التدرج: خطي
• اتجاه التدرج: 90 درجة
• موقف البداية: 20٪
• موضع النهاية: 20٪

تباعد

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

• الحشوة العلوية: 100 بكسل
• الحشو السفلي: 100 بكسل

فيضانات

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

• الفائض الأفقي: مخفي
• الفائض العمودي: مخفي

أضف صفًا جديدًا

هيكل العمود

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

تحجيم

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

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• معادلة ارتفاعات العمود: نعم
• العرض: 90٪
• العرض الأقصى: 1580 بكسل

العنصر الرئيسي

نقوم بمحاذاة محتوى الصف عموديًا عن طريق إضافة الأسطر التالية من كود CSS إلى العنصر الرئيسي للصف في علامة التبويب المتقدمة:

سطح المكتب:

display: flex;
justify-content: center;
align-items: center;

الجهاز اللوحي والهاتف:

display: block;

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

العنصر الرئيسي

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

سطح المكتب:

width: 45% !important;

الجهاز اللوحي والهاتف:

width: 100% !important;

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

لون الخلفية

سنقوم بعد ذلك بفتح إعدادات العمود 2 واستخدام لون الخلفية.

• لون الخلفية: # 193738

تباعد

بعد ذلك ، سنقوم بتغيير قيم تباعد العمود.

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

العنصر الرئيسي

وسنكمل إعدادات العمود بإضافة الأسطر التالية من كود CSS إلى العنصر الرئيسي للعمود:

سطح المكتب:

width: 55% !important;

الجهاز اللوحي والهاتف:

width: 100% !important;

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

اترك مربع الصورة فارغًا

حان الوقت لبدء إضافة الوحدات ، بدءًا من وحدة الصورة في العمود 1. اترك مربع الصورة فارغًا.

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

بدلاً من ذلك ، نحن نستخدم صورة خلفية لهذه الوحدة.

تحجيم

سنقوم بتعديل إعدادات التحجيم في علامة تبويب التصميم.

• عرض:
  • سطح المكتب: 100٪
  • الجهاز اللوحي والهاتف: 90٪
• محاذاة الوحدة: المركز

تباعد

بعد ذلك ، سنطبق القيم التالية على إعدادات التباعد:

• الهامش العلوي:
  • سطح المكتب: 100 بكسل
  • الجهاز اللوحي والهاتف: 0 بكسل
• الهامش السفلي:
  • سطح المكتب: 100 بكسل
  • الجهاز اللوحي والهاتف: 0 بكسل
• الحشوة العلوية:
  • سطح المكتب: 250 بكسل
  • الجهاز اللوحي: 200 بكسل
  • الهاتف: 150 بكسل
• الحشوة السفلية:
  • سطح المكتب: 250 بكسل
  • الجهاز اللوحي: 200 بكسل
  • الهاتف: 150 بكسل

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

أضف محتوى H3

في العمود 2. هناك ، الوحدة الأولى التي نحتاجها هي وحدة نصية تحتوي على بعض محتوى H3.

إعدادات نص H3

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

• خط العنوان 3: كارلا
• لون نص العنوان 3: # e0ca9a
• حجم نص العنوان 3:
  • سطح المكتب: 44 بكسل
  • الجهاز اللوحي: 30 بكسل
  • الهاتف: 26 بكسل

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

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

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

إعدادات النص

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

• خط النص: العاتا
• لون النص: rgba (255،255،255،0.67)
• حجم الخط:
  • سطح المكتب: 17 بكسل
  • الجهاز اللوحي: 15 بكسل
  • الهاتف: 14 بكسل
• ارتفاع خط النص: 2.2em

تباعد

وأضف بعض الهامش العلوي لإعدادات التباعد.

• الهامش الأعلى: 5٪

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

أضف نسخة

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

إعدادات الزر

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

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

• خط الزر: كارلا
• إظهار رمز الزر: نعم
• وضع رمز الزر: يسار
• فقط إظهار الرمز عند التمرير للزر: لا

تباعد

أضف قيمًا مخصصة إلى إعدادات التباعد بعد ذلك.

• الهامش الأعلى: 5٪
• الحشوة العلوية: 20 بكسل
• الحشو السفلي: 20 بكسل

صف استنساخ مرتين

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

تغيير الصور والمحتوى

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

2. إضافة تأثير سرعة التمرير

أضف فئة CSS إلى العناصر التي تريد انحرافها

العمود 2

الآن بعد أن أصبح لدينا هيكل العنصر في مكانه الصحيح ، يمكننا التركيز على جعل التأثير يعمل. للقيام بذلك ، افتح إعدادات العمود 2 لكل صف على حدة وقم بتعيين فئة CSS.

• فئة CSS: تحويل السرعة

وحدة الصورة في العمود 1

نضيف نفس فئة CSS إلى كل وحدة صورة في تصميمنا.

• فئة CSS: تحويل السرعة

أضف صفًا جديدًا

هيكل العمود

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

تباعد

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

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

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

بعد ذلك ، أضف "وحدة رمز" إلى هذا الصف الجديد.

إضافة مكتبات 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

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

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

إضافة رمز مخصص بين علامات البرنامج النصي (انحراف عمودي)

وقم بتضمين الأسطر التالية من كود JavaScript لإنشاء انحراف عمودي:

let proxy = { skew: 0 },
    skewSetter = gsap.quickSetter(".velocity-transform", "skewY", "deg"), 
    clamp = gsap.utils.clamp(-10, 10);

ScrollTrigger.create({
  onUpdate: (self) => {
    let skew = clamp(self.getVelocity() / -400);
    if (Math.abs(skew) > Math.abs(proxy.skew)) {
      proxy.skew = skew;
      gsap.to(proxy, {skew: 0, duration: 0.8, ease: "power0", overwrite: true, onUpdate: () => skewSetter(proxy.skew)});
    }
  }
});

gsap.set(".velocity-transform", {force3D: true});

استخدم الانحراف الأفقي أو التدوير بدلاً من ذلك

إذا كنت تريد استخدام الانحراف الأفقي أو التدوير بدلاً من ذلك ، كما هو موضح في معاينة هذا المنشور ، يمكنك ببساطة استبدال "SkewY" في الكود بـ "SkewX" للانحراف الأفقي أو "التدوير" للتدوير! هذا كل شيء.

معاينة

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

الانحراف العمودي

سطح المكتب

متحرك

الانحراف الأفقي

سطح المكتب

متحرك

استدارة

سطح المكتب

متحرك

افكار اخيرة

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

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