كيفية الجمع بين تأثيرات التحويم وخلفيات CSS Parallax في Divi

يتيح لنا استخدام CSS Parallax مع صور الخلفية في Divi إنشاء تأثيرات تحوم فريدة بشكل مدهش. المنظر هو أحد الطرق العديدة التي يمكننا من خلالها إضافة الحياة إلى مواقعنا الإلكترونية. وعند الجمع بين المنظر ومجموعة كبيرة من خيارات التمرير في Divi ، فإننا نجعل المحتوى ينبض بالحياة أكثر.

في هذا البرنامج التعليمي ، سنوضح أنه يمكنك بسرعة وسهولة تصميم تأثيرات تحوم خلفية CSS فريدة من نوعها في Divi. لا حاجة إلى مكون إضافي أو ترميز مخصص!

هيا بنا نبدأ.

نظرة خاطفة

فيما يلي نظرة سريعة على تأثيرات تحويم الخلفية css parallax التي سنصممها في هذا البرنامج التعليمي.

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

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

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

تنزيل مجاني

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

تحميل

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

لاستيراد التخطيط إلى صفحتك ، ما عليك سوى استخراج ملف مضغوط واسحب ملف json إلى Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، فهل نحن؟

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

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

1. موضوع Divi مثبت ونشط
2. تم إنشاء صفحة جديدة للبناء من الصفر على الواجهة الأمامية (منشئ بصري)
3. الصور لاستخدامها لمحتوى وهمي

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

الجزء 1: إنشاء تأثير تحوم الاختراق في Divi

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

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

تأكد من أن عرض الصورة لا يقل عن 1920 بكسل. يعمل التصميم بشكل جيد مع صورة خلفية داكنة مع الكثير من الملمس. أنا أستخدم واحدًا من حزمة تخطيط Coffee Shop المتوفرة لدينا من Divi Builder.

ثم أضف بعض المساحة المتروكة للقسم كما يلي:

الحشو: 10vw أعلى ، 10vw أسفل

أضف وحدة دعاية مغالى فيها

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

ثم حدِّث محتوى الدعاية المغالى فيها ببضع جمل من النص الأساسي. يمكنك الاحتفاظ بالعنوان الافتراضي هناك.

ثم انقر لاستخدام رمز وحدد رمز القهوة للدعاية الدعائية.

بعد أن يصبح المحتوى جاهزًا ، قم بتحديث إعدادات التصميم على النحو التالي:

لون الأيقونة: #ffffff
حجم خط الأيقونة: 50 بكسل
محاذاة النص: مركز
خط العنوان: أوزوالد
نمط خط العنوان TT
لون نص العنوان: #ffffff
تباعد حروف العنوان: 2 بكسل
خط الجسم: نونيتو
لون النص الأساسي: #ffffff
تباعد حروف الجسم: 1 بكسل
المساحة المتروكة: 30 بكسل للأعلى ، 30 بكسل للأسفل ، 30 بكسل لليسار ، 30 بكسل لليمين

ضبط عرض الصف

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

العرض الأقصى: 80٪

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

في هذا المثال ، سنقوم بتنشيط تأثير التمرير على مستوى العمود. يتيح لك هذا استخدام وحدات نمطية متعددة لبناء المحتوى ، على الرغم من أننا نستخدم وحدة دعاية دعاية مفردة فقط في الوقت الحالي.

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

افتح إعدادات العمود وأضف صورة الخلفية نفسها باستخدام CSS parallax.

لن تتمكن من رؤية أي اختلاف بين صورة خلفية العمود وصورة خلفية القسم لأن كلاهما يستخدم CSS parallax الذي يعمل بشكل أساسي على إصلاح الصورة في نفس المكان بالضبط على صفحة الويب. ومع ذلك ، سترى الفرق بمجرد تفعيل تأثير التمرير.

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

الحشو: 4vw أعلى ، 4vw أسفل
الزوايا الدائرية: 10 بكسل

ثم امنح العمود ظل مربع يظهر فقط عند التمرير على النحو التالي:

Box Shadow: انظر لقطة الشاشة
مربع الظل الوضع الرأسي: 0 بكسل
مربع قوة طمس الظل: 36 بكسل
لون الظل (افتراضي): rgba (0،0،0،0)
لون الظل (تحوم): rgba (0،0،0،0.72)

الآن دعنا ننتقل إلى خيارات التحويل ونقوم بتحديث أنماط التحويل التالية عند التمرير:

مقياس التحويل (تحوم): 105٪

سيؤدي هذا إلى تكبير العمود (ومحتوياته) قليلاً لإنشاء تأثير الظهور قليلاً من صورة الخلفية.

تحويل ترجمة المحور ص (تحوم): -2.5٪

يؤدي هذا إلى تحريك العمود لأعلى قليلاً عند التحويم لإنشاء إزاحة غير متكافئة طفيفة.

أصل التحويل: 100٪ 50٪ (أسفل الوسط)

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

هذا هو تأثير تحوم css المنظر حتى الآن.

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

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

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

إضافة الدوران إلى تأثير التحويم

يمكننا أيضًا إضافة دوران إلى تأثير css parallax hover الذي يضيف لمسة لطيفة إلى التصميم. ما عليك سوى فتح كل من إعدادات العمود وتحديث ما يلي:

Transform Rotate Z Axis (عند التحويم): 5deg

إذا كنت ترغب في مزجها ، يمكنك إعطاء العمود الأوسط تناوبًا بمقدار -5 درجة.

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

وهنا نفس التصميم مع صورة خلفية أفتح ونص أغمق.

الجزء 2: إنشاء تأثير تحوم الزجاج المكبر في Divi

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

تحديث إعدادات الصف

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

عرض الحضيض: 1
العرض: 100٪
العرض الأقصى: 98٪

بعد ذلك ، انتقل إلى علامة تبويب المحتوى واحذف عمودين بحيث يبقى عمود واحد فقط.

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

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

تحديث الوحدة النمطية Blurb

بعد استعادة إعدادات العمود إلى الأنماط الافتراضية ، افتح إعدادات وحدة blurb وأضف نفس صورة الخلفية css parallax التي تمت إضافتها إلى القسم.

تحجيم

لإنشاء وحدة دائرية ، نحتاج أولاً إلى منحها عرضًا وارتفاعًا مطابقين كما يلي:

العرض: 300 بكسل
محاذاة الوحدة: مركز
الارتفاع: 300 بكسل

الحدود

لإكمال التأثير الدائري ، نحتاج إلى تحديث الزوايا الدائرية وإعطائها حدًا بسيطًا.

زوايا دائرية: 50٪
عرض الحدود: 1 بكسل
لون الحدود: rgba (255،255،255،0.12)

تأثير تحوم ظل المربع

بعد ذلك ، امنح الدعاية الدعائية ظل مربع عند التمرير كما يلي:

Box Shadow: انظر لقطة الشاشة
مربع قوة طمس الظل: 36 بكسل
لون الظل (افتراضي): rgba (0،0،0،0)
لون الظل (تحوم): rgba (0،0،0،0.7)

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

بمجرد أن يصبح Box Shadow في مكانه ، قم بتحديث خيارات التحويل على النحو التالي:

أصل التحويل (افتراضي): 50٪ 0٪ (يسار الوسط)

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

مقياس التحويل (تحوم): 130٪

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

قم بتكرار العمود

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

افتح إعدادات الصف وكرر العمود مرتين ليصبح المجموع ثلاثة أعمدة.

تحديث أصل التحويل

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

افتح إعدادات وحدة blurb في العمود 2 وقم بتحديث ما يلي:

أصل التحويل: 50٪ 50٪ (مركز المركز)

ثم افتح إعدادات وحدة blurb في العمود 3 وقم بتحديث ما يلي:

أصل التحويل: 50٪ 100٪ (يمين الوسط)

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

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

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

افكار اخيرة

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

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

هتافات!