إذا كنت تبحث عن طريقة لإنشاء رسوم متحركة سلسة باستخدام تأثيرات التمرير المدمجة في Divi، فستحب هذا الشرح. سنوضح لك كيفية دمج خاصية تثبيت التمرير مع تأثيرات الحركة المدمجة في Divi لإنشاء أقسام كاملة الارتفاع يمكنك التمرير فيها دفعة واحدة.
سنبدأ بإنشاء القسم الأول. ثم سنعيد استخدام هذا القسم في جميع أنحاء تصميم صفحتنا. ولتمكين خاصية تثبيت التمرير، سنستخدم خصائص تثبيت التمرير في CSS التي سنُسندها إلى الأقسام، وHTML، ورأس وتذييل صفحتنا.
النتيجة المحتملة
قبل الخوض في الشرح، دعونا نلقي نظرة سريعة على النتيجة على أحجام الشاشات المختلفة.
1. قم بإنشاء صفحة جديدة وابدأ في تصميم القسم الأول
إضافة صفحة جديدة والتبديل إلى Visual Builder
ابدأ بإضافة صفحة جديدة. أدخل عنوان الصفحة وانشر الصفحة وانتقل إلى Visual Builder.
إعدادات القسم
التحجيم
بمجرد دخولك إلى الصفحة الجديدة، افتح القسم الموجود بالفعل وقم بتعديل إعدادات الحجم.
- ارتفاع الحد الأدنى: 100VH
العنصر الرئيسي
نضيف أيضًا سطرين من أكواد CSS إلى هذا القسم. سيساعدنا هذان السطران على تحويل القسم إلى نقطة تثبيت للتمرير.
التمرير-محاذاة المفاجئة: ابدأ ؛ التمرير-الخاطف-التوقف: عادي ؛
رؤية
للتأكد من عدم تجاوز أي شيء لحاوية القسم ، سنخفي فائض القسم.
- تجاوز أفقي: مخفي
- تجاوز عمودي: مخفي
أضف السطر رقم 1
هيكل العمود
استمر في إضافة سطر جديد إلى القسم باستخدام بنية العمود التالي:
التحجيم
بدون إضافة أي وحدات بعد ، افتح إعدادات الصف وقم بتعديل الحجم كما يلي:
- استخدام عرض مزراب مخصص: نعم
- عرض المزراب: 1
- العرض: 100٪
- العرض الأقصى: 100٪
التباعد
نقوم أيضًا بإزالة المساحة المتروكة العلوية والسفلية الافتراضية للقسم.
- الحشو العلوي: 0 بكسل
- المساحة السفلية: 0 بكسل
الموقع الحالي
وسنقوم بإعادة ترتيب الصف وفقًا لذلك:
- المنصب: مطلق
- الموقع: مركز القاع
أضف وحدة نصية إلى العمود
اترك مربع المحتوى فارغًا
الوحدة الوحيدة التي نحتاجها في هذا الصف هي وحدة نصية. تأكد من ترك مربع محتوى الوحدة فارغًا.
لون الخلفية
ثم قم بتغيير لون الخلفية.
- لون الخلفية: # ffee00
إعدادات النص
سنقوم بإزالة ارتفاع سطر النص للوحدة أيضًا.
- ارتفاع سطر النص: 1em
التحجيم
بعد ذلك ، سنذهب إلى إعدادات التحجيم ونغير العرض.
- العرض: 30٪
التباعد
سنحول الوحدة إلى مربع بإضافة بعض الحشوة العلوية أيضًا.
- حشوة علوية: 30٪
AddRow # 2
هيكل العمود
في السطر التالي. استخدم هيكل العمود التالي:
التحجيم
دون إضافة أي وحدات بعد، افتح إعدادات الخط وقم بتعديل معلمات الحجم في علامة تبويب التصميم:
- استخدم عرض مزراب مخصص: نعم
- عرض مزراب: 1
- العرض: 60vw
- أقصى عرض: 100 ٪
مباعدة
بعد ذلك، أضف هامشًا علويًا مخصصًا على أحجام الشاشات المختلفة.
- الهامش العلوي: 20vh (سطح المكتب) ، 5vw (الجهاز اللوحي والهاتف)
تباعد العمود 2
بعد ذلك ، سنفتح إعدادات العمود 2 ونضيف بعض قيم الحشو المخصصة.
- الحشوة العلوية: 2vh (الكمبيوتر اللوحي والهاتف)
- الحشوة اليسرى: 2vw
- الحشوة اليمنى: 2vw
أضف وحدة صورة إلى العمود 1
تحميل الصور
حان وقت إضافة الوحدات، أضف وحدة صورة إلى العمود 1 وقم بتحميل صورة من اختيارك.
التحجيم
سنقوم بعد ذلك بفرض العرض الكامل على الوحدة.
- فرض العرض الكامل: نعم
إضافة الوحدة النمطية للنص # 1 إلى العمود 2
أضف محتوى H2
في العمود الثاني، الوحدة الأولى التي نحتاجها هي وحدة نصية تحتوي على محتوى H2.
إعدادات النص H2
انتقل إلى علامة تبويب تصميم الوحدة وقم بتعديل إعدادات نص H2 كما يلي:
- خط العنوان 2: أنطون
- العنصر 2 حجم النص: 5vw (سطح المكتب) ، 7vw (الكمبيوتر اللوحي) ، 9vw (الهاتف)
إضافة الوحدة النمطية للنص # 2 إلى العمود 2
إضافة محتوى
أضف وحدة نصية أخرى أسفل الوحدة السابقة وأدرج محتوى الوصف الذي تختاره.
إعدادات النص
قم بتغيير إعدادات نص الوحدة كما يلي:
- خط النص: فتح بلا
- حجم النص: 0.8vw (سطح المكتب) ، 2vw (قرص) ، 2.5vw (الهاتف)
- ارتفاع سطر النص: 1,8 م
مباعدة
وأضف هامشًا علويًا وسفليًا مخصصًا إلى إعدادات التباعد.
- الهامش العلوي: 2vw
- الهامش السفلي: 2vw
إضافة وحدة زر إلى عمود 2
أضف نسخة
الوحدة التالية والأخيرة التي نحتاجها في هذا العمود هي وحدة زر. أضف نسخة من اختيارك.
إعدادات زر
صمم الزر وفقًا لذلك:
- استخدم الأنماط المخصصة للزر: نعم
- حجم نص الزر: 1vw (سطح المكتب) ، 2vw (قرص) ، 3vw (هاتف)
- لون نص الزر: # 333333
- لون حدود الزر: # 333333
- نصف قطر الزر: 1 بكسل
- خط الزر: أنطون
- زر نمط الخط: أحرف كبيرة
مباعدة
وأكمل إعدادات الوحدة النمطية بإضافة قيمة مخصصة بناءً على أحجام الشاشة.
- هامش داخلي مرتفع: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
- الهامش الداخلي المنخفض: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (الهاتف)
- الهامش الداخلي الأيسر: 3vw (سطح المكتب) ، 5vw (كمبيوتر لوحي) ، 7vw (هاتف)
- هامش الإنترنت الأيمن: 3vw (سطح المكتب) ، 5vw (جهاز لوحي) ، 7vw (هاتف)
2. إضافة تأثيرات التمرير إلى عناصر مختلفة
وحدة النص في السطر رقم 1
الرسوم المتحركة العمودية
بمجرد وضع جميع العناصر في مكانها ، حان الوقت لإضافة تأثيرات التمرير. افتح وحدة النص في صفك الأول واستخدم بعض الحركة العمودية.
- تمكين الحركة العمودية: نعم
- تعويض البداية: 4
- الإزاحة المتوسطة: 0
- الإزاحة المنتهية: -4
- مشغل تأثير الحركة: منتصف العنصر
خط 2
العمود 1
الرسوم المتحركة الأفقية
بعد ذلك ، افتح العمود الأول من صفك الثاني وأضف حركة أفقية.
- تنشيط الحركة الأفقية: نعم
- تعويض البداية: -3
- متوسط الإزاحة: 0 (من 40٪ إلى 60٪)
- تعويض النهاية: -3
- مُشغِّل تأثير الحركة: نقطة منتصف العنصر
تتلاشى والخروج
كما نقوم بتطبيق تأثير التلاشي التدريجي للداخل والخارج على نفس العمود.
- تنشيط التلاشي داخل وخارج: نعم
- العتامة الأولية: 0٪
- عتامة متوسطة: 100٪
- عتامة النهاية: 100٪
- مُشغِّل تأثير الحركة: نقطة منتصف العنصر
العمود 2
الحركة الأفقية
ثم سنفتح إعدادات العمود الثاني ونطبق إعدادات الحركة الأفقية التالية:
- تنشيط الحركة الأفقية: نعم
- تعويض البداية: 3
- متوسط الإزاحة: 0 (من 40٪ إلى 60٪)
- تعويض النهاية: 3
- مُشغِّل تأثير الحركة: نقطة منتصف العنصر
تتلاشى والخروج
مع تأثير تتلاشى واردة والصادرة.
- تنشيط التلاشي داخل وخارج: نعم
- العتامة الأولية: 0٪
- عتامة متوسطة: 100٪
- عتامة النهاية: 100٪
- مُشغِّل تأثير الحركة: نقطة منتصف العنصر
4. إعادة استخدام القسم الأول
قسم استنساخ أربع مرات
بمجرد الانتهاء من القسم الأول وتأثيرات التمرير الخاصة به ، يمكنك استنساخه عدة مرات كما تريد.
قم بتغيير ألوان خلفية جميع الأقسام الأخرى
سنقوم بتغيير لون خلفية جميع الأقسام الأخرى.
- لون الخلفية: #111111
5. أضف كود CSS لتمكين التقاط التمرير على صفحة HTML
أضف وحدة التعليمات البرمجية إلى القسم الأخير من الصفحة
الآن، لتمكين التقاط التمرير في HTML لصفحتنا، سنضيف وحدة برمجية في أي مكان في القسم الأخير من صفحتنا.
أدخل كود HTML CSS
ستساعدنا أسطر كود CSS هذه في تطبيق محاذاة التمرير على كود HTML الخاص بصفحتنا:
<style> html {overflow-x: hidden;scroll-snap-type: y mandatory;scroll-snap-points-y: repeat(100vh);} </style>
أضف خاصية "بدء تثبيت التمرير" إلى رأس وتذييل الصفحة.
سوف نتأكد من أن رأس الصفحة وتذييلها يقومان أيضًا بالتمرير في نقاط الالتقاط (تمامًا مثل الأقسام الخاصة بنا) عن طريق إضافة الأسطر التالية من كود CSS:
رأس وتذييل الصفحة {scroll-snap-align: start؛}
إلى إنهاء
في هذه المقالة، أوضحنا لكم كيفية إنشاء رسوم متحركة سلسة من خلال دمج خاصية تثبيت التمرير مع تأثيرات الحركة المدمجة في Divi. إنها طريقة رائعة لتفعيل تأثيرات التمرير بنقرة واحدة.
تُسهّل خاصية التقاط التمرير على الزوار التنقل بسلاسة بين أقسام موقعك الإلكتروني المختلفة. وقد دمجناها مع تصميم أقسام بارتفاع كامل. يمكنك أيضًا تحميل ملف JSON مجانًا! إذا كانت لديك أي أسئلة أو اقتراحات، فلا تتردد في ترك تعليق في قسم التعليقات أدناه.