Divi: كيفية إضافة تأثير الإمالة عند التمرير فوق عنصر

هل ترغب في إضافة تأثير الإمالة باستخدام Divi في أي عنصر من صفحتك؟

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

سنوضح لك في هذا البرنامج التعليمي كيفية إضافة تأثيرات إمالة التمرير إلى أي عنصر من العناصر Divi. باستخدام مزيج من مقتطفات jQuery Tilt.js وDivi Builder، سنوضح لك كيفية إضافة تأثيرات إمالة التمرير الرائعة إلى صورة أو عمود وحدة أو صف، وما إلى ذلك. 

سنوضح لك أيضًا كيفية إضافة تأثيرات المنظر ثلاثية الأبعاد المذهلة.

دعونا نبدأ!

مسح

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

أنظر أيضا: Divi: كيفية الكشف عن المحتوى عند المرور فوق مقسم القسم

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

من لوحة تحكم WordPress ، انتقل إلى الصفحات> إضافة جديد لإنشاء صفحة جديدة.

أعطه عنوانًا منطقيًا لك وانقر استخدم Divi Builder

ثم انقر فوق ابدأ البناء (البناء من الصفر)

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

أضف تأثيرات الإمالة عند المرور فوق أي عنصر في Divi

أضف تأثير Tilt Hover إلى وحدات Divi

لنبدأ بإضافة صف من ثلاثة أعمدة إلى القسم العادي الافتراضي.

أضف وحدة صورة

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

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

قم بتحميل صورة من اختيارك. 

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

تحت علامة التبويب متقدم، أضف فئة CSS التالية:

• فئة CSS: et-js-tilt

سيتم استخدام هذه الفئة كمحدد لوظيفة الإمالة لاحقًا.

نسخ ولصق وحدة الصورة السابقة

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

يمكنك استبدال الصور المكررة بأخرى جديدة إذا كنت ترغب في ذلك. فقط تأكد من أن كل وحدة صورة تنتمي إلى فئة CSS "et-js-tilt".

أضف مكتبة JQuery "tilt.js"

لإضافة المكتبة Tilt.js ومقتطف الشفرة اللازم لتشويه صورنا ، سنستخدم وحدة رمز.

أولاً ، أضف صفًا جديدًا عمودًا واحدًا أسفل الصف الحالي.

ثم أضف وحدة رمز إلى السطر الجديد.

ثم نحتاج للوصول إلى ملف مكتبة tilt.js من خلال إضافة نص برمجي يستورد tilt.js من CDN (https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery. min.js). قم بلصق البرنامج النصي التالي في مربع التعليمات البرمجية.

استخدم كود src التالي في علامة البرنامج النصي لاستيراد المكتبة:

src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"

يجب أن تبدو هذه:

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

jQuery(document).ready(function ($) {
  if ($(window).width() > 980) {
 
    $(".et-js-tilt").tilt({
      glare: true,
      maxGlare: 0.7,
      scale: 1.1,
      perspective: 300,
    });
 
  }
});

لاحظ أن وظيفة tilt () موجودة داخل عبارة if التي سيتم تشغيلها عندما يكون عرض المتصفح أكبر من 980 بكسل. سيضمن هذا أن التأثير يحدث فقط على جهاز كمبيوتر سطح المكتب.

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

تمت إضافة تأثير تمرير الإمالة إلى الخط

كما ذكرنا من قبل ، يمكنك إضافة تأثير إمالة التمرير هذا إلى أي عنصر Divi. هذا يشمل سطر كامل. 

بالإضافة إلى ذلك ، يمكنك إضافة تأثير إمالة إلى صف مع الحفاظ على تأثيرات الإمالة لكل من الوحدات النمطية داخل الصف.

إليك كيف.

سطر مكرر وإضافة فئة CSS فريدة إلى السطر

قم بتكرار صف الصور الموجود ، ثم افتح إعدادات الصف المكرر. تحت علامة التبويب متقدم، امنح السطر فئة CSS فريدة على النحو التالي:

• فئة CSS: et-row-js-tilt

أضف jQuery

ثم أضف jQuery التالي أسفل وظيفة الانحراف السابقة لتطبيق دالة انحراف منفصلة على السطر.

$(".et-row-js-tilt").tilt({
  scale: 1,
  perspective: 1200,
});

لاحظ أنه بالنسبة لتأثير الإمالة هذا ، قمنا بتقليل المقياس إلى 1 وزدنا قيمة المنظور بحيث يكون الميل أكثر دقة.

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

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

أضف تأثير Tilt Hover إلى عمود به عدة وحدات Divi

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

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

أضف سطرًا جديدًا

للبدء ، قم بإنشاء صف جديد بهيكل العمود التالي:

أضف وحدة صورة

داخل العمود 2 (العمود الأوسط) ، أضف وحدة صورة جديدة.

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

اضبط محاذاة الصورة إلى المركز.

أضف وحدة نصية

أسفل وحدة الصورة ، أضف وحدة نصية برأس H2 التالي:

<h2>Local Organic</h2>

بعد ذلك ، قم بتحديث أنماط عناوين H2 على النحو التالي:

• الخط: بيركشاير سواش
• محاذاة النص: توسيط
• لون النص: # 000000
• الحجم: 60 بكسل
• ارتفاع الخط: 1,2 م

إضافة وحدة زر

أسفل وحدة النص ، أضف وحدة زر.

قم بتحديث نص الزر لقراءة "مزيد من المعلومات ..."

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

• محاذاة الزر: الوسط

• استخدام الأنماط المخصصة للزر
• حجم نص الزر: 18 بكسل
• لون النص: #fff
• خلفية الزر: # 000

• عرض حد الزر: 0 بكسل
• نصف قطر الحدود: 100 بكسل
• خط الزر: الرمال المتحركة
• وزن الخط: عريض

• المساحة المتروكة (أعلى وأسفل): 16 بكسل
• الحشو (يسار ويمين): 30 بكسل

• Box Shadow: انظر لقطة الشاشة

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

بمجرد اكتمال الوحدات النمطية الثلاثة ، افتح إعدادات العمود الأصلي لتلك الوحدات (العمود 2) وقم بتحديث ما يلي:

• الخلفية: # f5cee6

• المساحة المتروكة (أعلى وأسفل): 50 بكسل
• الحشو (يسار ويمين): 20 بكسل

إضافة فئة CSS إلى العمود

ضمن علامة التبويب خيارات متقدمة ، أضف فئة CSS التالية:

• فئة CSS: et-column-js-tilt

تمت إضافة jQuery لتطبيق تأثير الإمالة على العمود

لإضافة تأثير الانحراف إلى العمود ، يمكننا إضافة مقتطف jQuery آخر مشابه يستهدف عمود فئة CSS. 

الصق مقتطف الشفرة التالي أسفل مقتطف الشفرة السابق الذي يستهدف الصف.

$(".et-column-js-tilt").tilt({
  scale: 1.1,
  perspective: 1000,
});

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

تمت إضافة تأثير المنظر ثلاثي الأبعاد إلى العناصر الداخلية

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

باستخدام مزيج من المنظور والتحويل: translateZ () ، يمكننا جعل كل وحدة من وحدات العمود تظهر في مساحة ثلاثية الأبعاد عندما يكون تأثير الإمالة عند التمرير نشطًا.

إليك كيف.

الصف السابق مكرر

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

أضف فئة عمود واحد

ثم قم بتحديث العمود الأوسط (العمود 2) بفئة CSS فريدة كما يلي:

• فئة CSS: et-column-js-tilt-3d

عرف المغلق

للتأكد من أن الوحدات الداخلية تحافظ على التأثير ثلاثي الأبعاد ، أضف CSS المخصص التالي إلى عنصر العمود الرئيسي:

transform-style: preserve-3d;

أضف jQuery و CSS

بعد ذلك ، أضف المزيد من مقتطفات jQuery أسفل مقتطف وظيفة الانحراف السابق الذي يستهدف العمود على النحو التالي:

const columnTilt3d = $(".et-column-js-tilt-3d").tilt({
  scale: 1.1,
  perspective: 1000,
});
columnTilt3d.on("tilt.mouseEnter", function (e) {
  $(e.target).addClass("tilt-active");
});
columnTilt3d.on("tilt.mouseLeave", function (e) {
  $(e.target).removeClass("tilt-active");
});

يضيف هذا jQuery دالة إمالة أساسية أخرى إلى العمود ، تمامًا مثل المثال السابق. 

.et-column-js-tilt-3d.tilt-active .et_pb_image {
  transform: translateZ(100px);
}
.et-column-js-tilt-3d.tilt-active .et_pb_text {
  transform: translateZ(40px);
}
.et-column-js-tilt-3d.tilt-active .et_pb_button {
  transform: translateZ(50px);
}

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

اقرأ أيضا: Divi: كيفية الكشف عن المحتوى عند المرور فوق مقسم القسم

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

إليك نظرة أخرى على النتائج النهائية لأمثلة لدينا.

تحميل DIVI الآن !!!

وفي الختام

تأثيرات إمالة التمرير التي يوفرها Tilt.js ممتعة حقًا للتجربة. 

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

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

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

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

...