كيفية إنشاء أنيميشن مغلف باستخدام تأثيرات التمرير لديفي

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

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

معاينة

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

سطح المكتب

متحرك

اشترك في قناتنا على اليوتيوب

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

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

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

تنزيل مجاني

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

تحميل

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

إعادة تكوين هيكل العنصر

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

لون الخلفية

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

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

تباعد

عدّل إعدادات التباعد بعد ذلك.

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

فيضانات

وإخفاء قسم الفائض.

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

أضف الصف رقم 1

هيكل العمود

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

لون الخلفية

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

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

تحجيم

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

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

تباعد

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

• الحشوة العلوية: 14vw (سطح المكتب) ، 11vw (الجهاز اللوحي والهاتف)
• الحشوة السفلية: 14vw (سطح المكتب) ، 11vw (الكمبيوتر اللوحي والهاتف)
• الحشو الأيسر: 20vw (سطح المكتب) ، 10vw (الكمبيوتر اللوحي والهاتف)
• الحشو الأيمن: 20vw (سطح المكتب) ، 10vw (الجهاز اللوحي والهاتف)

الحدود

أضف بعض نصف قطر الحدود أيضًا.

• جميع الزوايا: 20 بكسل

مربع الظل

نحن أيضًا نستخدم ظل الصندوق الخفيف.

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

فهرس Z.

أكمل إعدادات الصف عن طريق زيادة فهرس z في علامة التبويب خيارات متقدمة.

• الفهرس Z: 11

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

أضف محتوى H2

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

إعدادات نص H2

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

• خط العنوان 2: بوبينز
• حجم نص العنوان 2: 2vw (سطح المكتب) ، 4vw (جهاز لوحي) ، 5vw (هاتف)

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

إضافة محتوى

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

إعدادات النص

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

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

تباعد

أضف بعض القيم العلوية والسفلية المخصصة عبر أحجام الشاشات المختلفة أيضًا.

• الحشوة العلوية: 2vw (سطح المكتب) ، 4vw (جهاز لوحي) ، 5vw (هاتف)
• الحشوة السفلية: 2vw (سطح المكتب) ، 4vw (جهاز لوحي) ، 5vw (هاتف)

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

أضف نسخة

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

إعدادات الزر

بعد ذلك ، صمم الزر وفقًا لذلك:

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
• لون نص الزر: #ffffff
• لون خلفية الزر: # 0f33ff
• عرض حد الزر: 0 بكسل

• نصف قطر حدود الزر: 100 بكسل
• خط الزر: بوبينز

تباعد

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

• الحشوة العلوية: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
• الحشوة السفلية: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
• الحشو الأيسر: 2vw (سطح المكتب) ، 4vw (كمبيوتر لوحي) ، 6vw (هاتف)
• الحشو الأيمن: 2vw (سطح المكتب) ، 4vw (جهاز لوحي) ، 6vw (هاتف)

أضف الصف رقم 2

هيكل العمود

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

تحجيم

اسمح للصف بأخذ عرض القسم بالكامل عن طريق تغيير إعدادات التحجيم على النحو التالي:

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

تباعد

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

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

عرض

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

display: flex;

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

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

أضف وحدة صورة إلى العمود 1 واترك مربع الصورة فارغًا.

خلفية متدرجة

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

• اللون 1: rgba (255،255،255،0)
• اللون 2: # e8e8e8
• نوع التدرج: خطي
• اتجاه التدرج: 150 درجة
• موقف البداية: 50٪
• موقف النهاية: 50٪

تباعد

قم بتغيير قيم المساحة المتروكة للوحدة وفقًا لذلك:

• الحشوة العلوية: 15vw
• الحشو السفلي: 15vw

استنساخ وحدة الصورة في العمود 1 ووضع نسخة مكررة في العمود 2

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

تغيير خلفية التدرج

قم بتغيير خلفية التدرج كما يلي:

• اللون 1: rgba (255،255،255،0)
• اللون 2: #efefef
• نوع التدرج: خطي
• اتجاه التدرج: 210 درجة
• موقف البداية: 50٪
• موقف النهاية: 50٪

أضف الصف رقم 3

هيكل العمود

لإنشاء الجزء السفلي من المغلف ، سنحتاج إلى صف آخر بهيكل العمود التالي:

تحجيم

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

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

تباعد

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

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

عرض

واسمح لكلا العمودين بالظهور بجانب بعضهما البعض عن طريق إضافة سطر واحد من كود CSS إلى العنصر الرئيسي للصف.

display: flex;

فهرس Z.

أكمل إعدادات الصف عن طريق زيادة فهرس z في علامة التبويب خيارات متقدمة.

• الفهرس Z: 12

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

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

أضف وحدة صورة إلى العمود 1 واترك مربع الصورة فارغًا مرة أخرى.

خلفية متدرجة

استخدم خلفية متدرجة بدلاً من ذلك.

• اللون 1: rgba (255،255،255،0)
• اللون 2: #efefef
• نوع التدرج: خطي
• اتجاه التدرج: 213 درجة
• موقف البداية: 40٪
• موضع النهاية: 40٪

تباعد

وقم بزيادة حجم الوحدة بإضافة بعض الحشوة العلوية والسفلية.

• الحشو العلوي: 20vw
• الحشوة السفلية: 20vw

استنساخ وحدة الصورة في العمود 1 ووضع نسخة مكررة في العمود 2

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

تغيير خلفية التدرج

تأكد من تغيير خلفية التدرج المكرر.

• اللون 1: rgba (255،255،255،0)
• اللون 2: # e8e8e8
• نوع التدرج: خطي
• اتجاه التدرج: 147 درجة
• موقف البداية: 40٪
• موضع النهاية: 40٪

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

الآن ، الجزء الأخير من عمل الرسوم المتحركة للمغلف هو إضافة تأثير التمرير الرأسي سريع الاستجابة إلى الصف الأول في القسم الخاص بك ، وقد انتهيت!

• تمكين الحركة العمودية: نعم
• بداية الإزاحة:
  • سطح المكتب: 0 (بنسبة 68٪)
  • الجهاز اللوحي: 0.5 (بنسبة 61٪)
  • الهاتف: 0.5 (بنسبة 43٪)
• تعويض متوسط:
  • سطح المكتب: 6.5 (بنسبة 81٪)
  • الجهاز اللوحي والهاتف: 21.5 (بنسبة 82٪)
• إزاحة النهاية:
  • سطح المكتب: 16 (بنسبة 95٪)
  • الجهاز اللوحي والهاتف: 21.5 (بنسبة 82٪)

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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