كيفية الجمع بين التقاط التمرير وتأثيرات الحركة للحصول على رسوم متحركة سلسة

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

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

معاينة

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

سطح المكتب

متحرك

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

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

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

تنزيل مجاني

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

تحميل

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

1. أنشئ صفحة جديدة وابدأ في تصميم القسم الأول

إضافة صفحة جديدة والتبديل إلى Visual Builder

ابدأ بإضافة صفحة جديدة. أدخل عنوان الصفحة وانشر الصفحة وانتقل إلى Visual Builder.

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

تحجيم

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

• ارتفاع الحد الأدنى: 100vh

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

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

scroll-snap-align: start;
scroll-snap-stop: normal;

الرؤية

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

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

أضف الصف رقم 1

هيكل العمود

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

تحجيم

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

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• العرض: 100٪
• العرض الأقصى: 100٪

تباعد

نقوم أيضًا بإزالة المساحة المتروكة العلوية والسفلية الافتراضية للقسم.

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

موقع

وسنقوم بتغيير موضع الصف وفقًا لذلك:

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

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

اترك مربع المحتوى فارغًا

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

لون الخلفية

ثم قم بتغيير لون الخلفية.

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

إعدادات النص

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

• ارتفاع خط النص: 1em

تحجيم

بعد ذلك ، سنذهب إلى إعدادات التحجيم ونغير العرض.

• العرض: 30٪

تباعد

سنحول الوحدة إلى مربع بإضافة بعض الحشوة العلوية أيضًا.

• حشوة علوية: 30٪

أضف الصف رقم 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

إضافة محتوى

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

إعدادات النص

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

• خط النص: Open Sans
• حجم النص: 0.8vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 2.5vw (هاتف)
• ارتفاع خط النص: 1.8em

تباعد

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

• الهامش العلوي: 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 proximity;
}

</style>

إضافة التمرير بدء الالتقاط إلى رأس وتذييل الصفحة

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

header, footer {
scroll-snap-align: start;
}

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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