كيفية إنشاء ظلال صور متحركة عند التمرير في Divi

في عالم تصميم الويب ، عادة ما نفكر في الظلال على أنها شيء يمكننا إضافته في Photoshop أو كخاصية CSS (مثل box-shadow أو text-shadow). ولكن مع Divi ، يمكننا التفكير خارج الصندوق (أو ظل الصندوق). من خلال بعض التعديلات فقط على خيارات مرشح Divi المضمنة وتأثير التمرير ، يمكننا تحويل أي صورة إلى ظل نابض بالحياة.

في هذا البرنامج التعليمي ، سوف نوضح لك كيفية إنشاء ظلال صور متحركة عند التمرير في Divi. الحيلة هي العثور على صورة PNG ذات شكل فريد بحيث ، بمجرد تحويل الصورة ، ستحافظ على الشكل وتبدو كظل واقعي للصورة. بعد أن تصبح الصورة / الظل جاهزة ، يمكننا إضافة بعض تأثيرات التمرير لتحريك الظل أثناء قيام المستخدم بالتمرير. سيضيف هذا التأثير غير العادي (المألوف) عنصر تصميم مذهل سيجلب حياة جديدة إلى موقعك.

هيا بنا نبدأ!

نظرة خاطفة

فيما يلي نظرة سريعة على التصميم الذي سنقوم ببنائه في هذا البرنامج التعليمي.

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

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

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

تنزيل مجاني

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

تحميل

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

لاستيراد تخطيط القسم إلى مكتبة Divi الخاصة بك ، انتقل إلى مكتبة Divi.

انقر فوق الزر "استيراد".

في نافذة قابلية النقل المنبثقة ، حدد علامة التبويب استيراد واختر ملف التنزيل من جهاز الكمبيوتر الخاص بك.

ثم انقر فوق زر الاستيراد.

بمجرد الانتهاء من ذلك ، سيكون تخطيط القسم متاحًا في Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، أليس كذلك؟

ما تحتاجه للبدء

للبدء ، سوف تحتاج إلى القيام بما يلي:

1. إذا لم تكن قد قمت بذلك بعد ، فقم بتثبيت وتفعيل Divi Theme.
2. قم بإنشاء صفحة جديدة في WordPress واستخدم Divi Builder لتحرير الصفحة على الواجهة الأمامية (منشئ مرئي).
3. اختر الخيار "البناء من الصفر".

بعد ذلك ، سيكون لديك لوحة فارغة لبدء التصميم في Divi ،

الجزء 1: تصميم مخطط القسم

في هذا الجزء الأول ، سنقوم بتصميم تخطيط مقطع سريع لاستكمال تأثير تمرير ظل الصورة المتحركة.

أضف صف عمودين

للبدء ، أضف صفًا من عمودين إلى القسم العادي.

أضف وحدة النص

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

محتوى النص

ثم الصق HTML التالي داخل محتوى النص:

<h2>Our Wedding</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

تصميم نصي

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

• حجم نص النص: 16 بكسل
• ارتفاع خط النص: 2em

• خط العنوان 2: Comfortaa
• لون نص العنوان 2: # 444235
• حجم نص العنوان 2: 60 بكسل (سطح المكتب) ، 40 بكسل (جهاز لوحي)

أضف لهجة تصميم الصورة

ضمن وحدة النص ، سنضيف صورة ستكون بمثابة لهجة تصميم للنص. سنستخدم صورة فرع شجرة من Holistic Healer Layout Pack. ستكون هذه هي نفس الصورة التي سنستخدمها لاحقًا لظلال الصور المتحركة.

إضافة صورة

أضف وحدة صورة جديدة ضمن وحدة النص.

ثم قم بتحميل الصورة.

تصميم الصور

ضمن علامة تبويب التصميم ، قم بإسقاط عتامة الصورة باستخدام إعدادات المرشح.

• العتامة: 20٪

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

• تحويل المحور السيني للترجمة: -20٪
• تحويل ترجمة المحور ص: -90٪

موقف الصورة

ثم امنح الصورة موضعًا مطلقًا.

• الموقف: مطلق

الجزء 2: إنشاء ظلال الصور المتحركة

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

أضف الصورة الرئيسية

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

ثم قم بتحميل صورة لا يقل عرضها عن 800 بكسل. نظرًا لأننا سنضيف ظل صورة متحركة لفرع شجرة ، فمن المنطقي استخدام صورة في مكان ما بالخارج.

ثم قم بإخراج الهامش السفلي الافتراضي ضمن الوحدة النمطية على النحو التالي:

• الهامش السفلي: 0 بكسل

إنشاء ظل صورة متحركة 1

نحن الآن جاهزون لإنشاء أول ظل متحرك للصورة. الفكرة الأساسية هي استخدام صورة بتنسيق ملف PNG بحيث لا تظهر الخلفية الشفافة للصورة. ثم سنستخدم تأثيرات المرشح لضبط السطوع والعتامة والتمويه لتحويل الصورة لتبدو وكأنها ظل. نظرًا لأن صورة PNG لها شكل فريد ، سيحتفظ الظل أيضًا بنفس الشكل.

لنبدأ بإضافة نفس صورة PNG لفرع من Holistic Healer Layout Pack.

ها هو…

أضف وحدة الصورة أسفل الصورة في العمود الأيمن.

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

مرشحات الصور

ضمن علامة تبويب التصميم ، قم بتحديث المرشحات لجعل الصورة تبدو وكأنها ظل.

• السطوع: 0٪
• العتامة: 25٪
• طمس: 8 بكسل

موقف الصورة

ثم امنح ظل الصورة موضعًا مطلقًا بحيث يكون فوق الصورة الرئيسية أعلاه.

تأثيرات تمرير الصورة

لتحريك ظل الصورة ، قم بتحديث تأثيرات التمرير التالية.

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

• تمكين الحركة الأفقية: نعم
• بداية الإزاحة: 0 (عند 0٪)
• تعويض متوسط: -3 (عند 50٪)
• إزاحة النهاية: -6 (عند 100٪)

ضمن علامة التبويب "التوسع لأعلى ولأسفل" ...

• تمكين التحجيم لأعلى ولأسفل: نعم
• مقياس البدء: 160٪ (عند 0٪)
• مقياس متوسط: 160٪ (عند 50٪)
• مقياس النهاية: 160٪ (عند 100٪)

(ملاحظة: سيؤدي هذا إلى تكبير الظل إلى 160٪ وإبقائه هناك طوال تأثير التمرير بالكامل. ولكن لا تتردد في ضبط النسب المئوية للمقياس في نقاط مختلفة.)

ضمن علامة التبويب "تدوير" ...

• تمكين الحركة الأفقية: نعم
• بدء الدوران: 30 درجة (عند 0٪)
• دوران متوسط: 0 درجة (عند 50٪)
• نهاية الدوران: -30 درجة (عند 100٪)

التحقق من النتيجة حتى الآن

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

• الهامش: 70vh أعلى ، 70vh سفلي

هذا ما يبدو عليه التأثير حتى الآن.

إخفاء تجاوز العمود

من أجل احتواء ظل الصورة داخل نفس عمود الصورة الرئيسية ، افتح إعدادات العمود 2 ، وقم بتحديث خيارات التجاوز كما يلي:

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

الآن تحقق من النتيجة.

إنشاء ظل صورة متحركة 2

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

ظل صورة موجود مكرر

باستخدام مشروط الطبقات ، قم بتكرار صورة الظل.

تحديث تأثيرات التمرير

ثم افتح إعدادات التكرار وقم بتحديث تأثيرات التمرير على النحو التالي:

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

• تمكين الحركة الأفقية: نعم
• بداية الإزاحة: 0 (عند 0٪)
• تعويض متوسط: 3 (عند 50٪)
• إزاحة النهاية: 6 (عند 100٪)

ضمن علامة التبويب "تدوير" ...

• تمكين الحركة الأفقية: نعم
• بدء الدوران: 210 درجة (عند 0٪)
• دوران متوسط: 180 درجة (عند 50٪)
• دوران النهاية: 150 درجة (عند 100٪)

ها هي النتيجة ...

إضافة تأثير التكبير على الصورة الرئيسية

نظرًا لأن تجاوز العمود مخفي ، يمكننا قياس الصورة الرئيسية عند التمرير لإنشاء تكبير دقيق (أو تأثير ken burns) يكمل ظلال الصورة المتحركة.

للقيام بذلك ، افتح إعدادات الصورة الرئيسية وقم بتحديث ما يلي:

ضمن علامة التبويب "التوسع لأعلى ولأسفل" ...

• تمكين التحجيم لأعلى ولأسفل: نعم
• مقياس البدء: 100٪ (عند 0٪)
• مقياس متوسط: 115٪ (عند 50٪)
• مقياس النهاية: 130٪ (عند 100٪)

سيؤدي هذا إلى إنشاء تأثير تكبير أثناء قيام المستخدم بالتمرير.

النتيجة النهائية

وهذه هي النتيجة النهائية.

افكار اخيرة

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

أتطلع إلى الاستماع منك في التعليقات.

هتافات!