كيفية إنشاء تأثير تحريك موسيقي ديناميكي ثلاثي الأبعاد في Divi

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

لإنشائه ، سنستخدم Divi builder للجزء الأكبر من التصميم. ثم سنستخدم بعض CSS و JQuery المخصصين لإنشاء وظائف الرسوم المتحركة.

بمجرد الانتهاء من ذلك ، سيكون لديك تصميم مثير للإعجاب لعرض منتجات أو خدمات جديدة في مشروعك التالي!

هيا بنا نبدأ.

نظرة خاطفة

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

يمكنك أيضًا التحقق من رمز الشفرة هذا لمشاهدة عرض توضيحي مباشر للتأثير.

قم بتنزيل 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.

إنشاء تأثير تحريك موسيقي ديناميكي ثلاثي الأبعاد في Divi

الجزء 1: إنشاء الحاوية والبطاقة مع صف وعمود

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

ولكن قبل إنشاء الصف والعمود ، دعنا نصمم القسم.

القسم

للبدء ، افتح الإعدادات للقسم العادي الافتراضي وقم بتحديث ما يلي:

• لون الخلفية: rgba (68،55،99،0.1)

• الحشوة: 7vh أعلى ، 7vh أسفل

الصف (حاوية تحوم)

أضف صفًا من عمود واحد إلى القسم.

إعدادات الصف

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

• عرض الحضيض: 1
• العرض: 100٪
• أقصى عرض: 70٪ (كمبيوتر مكتبي) ، 60٪ (كمبيوتر لوحي) ، 50٪ (هاتف)
• الحشوة: 7vh ، أعلى ، 7vh أسفل ، 5vw يسار ، 5vw يمين

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

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

• فئة CSS: et-hover-container

ثم أضف CSS التالي إلى العنصر الرئيسي:

display:flex;
align-items:center;
justify-content:center;

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

العمود (أو البطاقة)

بعد تحديث الصف ، افتح إعدادات العمود لإنشاء نمط بطاقتنا على النحو التالي:

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

• الحشو: 7vh علوي ، 7vh سفلي ، 5٪ يسار ، 5٪ يمين
• الزوايا الدائرية: 30 بكسل

• Box Shadow: انظر لقطة الشاشة
• مربع الظل الوضع الرأسي: 0 بكسل
• مربع قوة طمس الظل: 80 بكسل
• لون الظل: rgba (0،0،0،0.2)

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

• فئة CSS: بطاقة et-mousemove

ثم أضف CSS المخصص هذا إلى العنصر الرئيسي:

max-width: 600px;

ثم تأكد من ضبط خصائص الفائض على "مرئية".

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

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

الجزء الثاني: تكوين عناصر البطاقة

# 1 خلفية الدائرة مع الشعار

بالنسبة للعنصر الأول داخل بطاقتنا ، سنضيف خلفية دائرية تتضمن شعارًا يجلس خلف صورة الدراجة الخاصة بنا.

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

احذف النص الافتراضي بحيث يكون محتوى النص فارغًا.

ثم أضف خلفية متدرجة:

• خلفية متدرجة اللون الأيسر: # 443763
• خلفية متدرجة اللون الصحيح: # ea3900

بالإضافة إلى الخلفية المتدرجة ، أضف شعارًا لصورة الخلفية.

• صورة الخلفية: [أضف أي صورة شعار png بحجم 60 × 60 بكسل تقريبًا]
• حجم صورة الخلفية: الحجم الفعلي

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

• العرض: 160 بكسل (سطح المكتب) ، 150 بكسل (جهاز لوحي) ، 80 بكسل (هاتف)
• الارتفاع: 160 بكسل (سطح المكتب) ، 150 بكسل (الجهاز اللوحي) ، 80 بكسل (الهاتف)
• زوايا دائرية: 50٪

تعطينا قيم العرض والارتفاع المتطابقة ونصف قطر الحد 50٪ شكل الدائرة الذي نبحث عنه.

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

• الموقف: مطلق
• الموقع: توب سنتر
• تعويض عمودي: 15٪

# 2 صورة البطاقة

لإنشاء صورة للمنتج (في هذه الحالة دراجة) ، أضف وحدة صورة جديدة ضمن وحدة النص السابقة.

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

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

• محاذاة الصورة: المركز
• العرض: 90٪
• الهامش: قاع 4 ساعات

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

• فئة CSS: et-card-image

# 3 عنوان البطاقة

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

في محتوى نص الوحدة النمطية الجديدة ، الصق عنوان H2 التالي HTML:

<h2>The <span style="color: #ea3900;">Divi</span> Bike</h2>

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

• خط العنوان 2: Bebas Neue
• العنوان 2 محاذاة النص: الوسط
• لون نص العنوان 2: # 443763
• حجم نص العنوان 2: 75 بكسل (سطح المكتب) ، 60 بكسل (الجهاز اللوحي) ، 45 بكسل (الهاتف)
• العنوان 2 تباعد الأحرف: 0.05em
• الهامش: قاع 4 ساعات

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

• فئة CSS: عنوان البطاقة الإلكترونية

# 4 نص معلومات البطاقة

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

ثم أضف المحتوى التالي إلى النص الأساسي:

<p>The One and Only Divi Bike<br>(By Elegant Themes)</p>

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

• وزن خط النص: شبه عريض
• حجم نص النص: 18 بكسل (سطح المكتب) ، 16 بكسل (الجهاز اللوحي والهاتف)
• ارتفاع خط النص: 1.8em
• محاذاة النص: مركز
• الهامش: 4vh

ثم امنح وحدة النص فئة مخصصة:

• فئة CSS: et-card-info

# 5 زر البطاقة

لإنشاء زر البطاقة ، أضف وحدة زر جديدة ضمن وحدة نص المعلومات.

في مشروط إعدادات الزر ، قم بتحديث نص الزر.

• نص الزر: قدم عرضًا

ضمن علامة تبويب التصميم ، حدد نمط الزر على النحو التالي:

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 25 بكسل (سطح المكتب) ، 20 بكسل (جهاز لوحي) ، 16 بكسل (هاتف)
• لون نص الزر: #ffffff
• لون خلفية الزر: # 443763
• عرض حد الزر: 0 بكسل
• نصف قطر حد الزر: 30 بكسل
• تباعد حرف الزر: 0.1em
• خط الزر: Bebas Neue
• المساحة المتروكة (سطح المكتب): 0.5 نقطة من الأعلى ، 0.5 بوصات من الأسفل ، 3 بوصات على اليسار ، 3 بوصات على اليمين
• الحشو (الهاتف): 0.5 سم علوي ، 0.5 سم أسفل ، 2 سم يسار ، 2 بيمين

ثم امنح الزر فئة مخصصة:

• زر بطاقة et

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

ها هي نتيجة التصميم حتى الآن.

الآن ، كل ما نحتاجه هو بعض التعليمات البرمجية المخصصة.

الجزء 3: إضافة الرمز المخصص (CSS و JQuery)

الآن وقد اكتمل تصميمنا ، يمكننا إضافة كود CSS و JQuery اللازمين لإنشاء تأثير تحريك الماوس الديناميكي ثلاثي الأبعاد إلى البطاقة / العمود وعناصر البطاقة.

للقيام بذلك ، أضف وحدة رمز ضمن وحدة الزر.

ثم الصق CSS المخصص التالي في مربع التعليمات البرمجية مع التأكد من التفاف CSS في علامات النمط .

/*add perspective to row for 3d perspective of child elements*/ 
.et-hover-container {
perspective: 1000px;
}

/*preserve-3d needed for 3d effect on card elements*/ 
.et-mousemove-card {
transform-style: preserve-3d;
transition: all 100ms linear !important;
}

/*transition timing function and duration for card elements*/ 
.et-card-image,
.et-popout-title,
.et-card-info,
.et-mousemove-card .et_pb_button_module_wrapper {
transition: all 750ms ease-out !important;
}

/*transform styles for card elements*/
.et-card-image.transform-3d {
transform: translateZ(150px) rotateZ(10deg) !important;
}
.et-card-heading.transform-3d {
transform: translateZ(150px) !important;
}
.et-card-info.transform-3d {
transform: translateZ(50px) !important;
}
.et-mousemove-card .et_pb_button_module_wrapper.transform-3d {
transform: translateZ(150px) rotateX(20deg) !important;
}

ضمن CSS ، الصق JQuery التالية مع التأكد من التفاف التعليمات البرمجية في علامات البرنامج النصي .

jQuery(document).ready(function ($) {
//Items
var $hoverContainer = $(".et-hover-container");
var $mousemoveCard = $(".et-mousemove-card");
var $cardImage = $(".et-card-image");
var $cardHeading = $(".et-card-heading");
var $cardInfo = $(".et-card-info");
var $cardButton = $(".et-mousemove-card .et_pb_button_module_wrapper");

//Moving Animation Event
$hoverContainer.on("mousemove", function (e) {
let xAxis = (window.innerWidth / 2 - e.clientX) / 25;
let yAxis = (window.innerHeight / 2 - e.clientY) / 25;
$mousemoveCard.css(
"transform",
`rotateY(${xAxis}deg) rotateX(${yAxis}deg)`
);
});

//Animate on Hover
$hoverContainer.hover(function () {
$mousemoveCard.toggleClass("transform-3d");
$cardHeading.toggleClass("transform-3d");
$cardImage.toggleClass("transform-3d");
$cardButton.toggleClass("transform-3d");
$cardInfo.toggleClass("transform-3d");
});

//Pop Back on mouseleave
$hoverContainer.on("mouseleave", function () {
$mousemoveCard.css("transform", `rotateY(0deg) rotateX(0deg)`);
});
});

حول المدونة

CSS

لإعطاء العناصر ثلاثية الأبعاد الخاصة بنا (العمود والوحدات النمطية) ، نحتاج إلى استخدام خاصية المنظور CSS في الصف (أو حاوية التمرير).

.et-hover-container {
perspective: 1000px;
}

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

.et-mousemove-card {
transform-style: preserve-3d;
transition: all 100ms linear !important;
}

ثم نقوم بتعيين وظيفة توقيت الانتقال والمدة عندما يتم تحريك عناصر البطاقة.

.et-card-image,
.et-popout-title,
.et-card-info,
.et-mousemove-card .et_pb_button_module_wrapper {
transition: all 750ms ease-out !important;
}

أخيرًا ، نستخدم خاصية التحويل مع وظيفة translateZ لتحريك العناصر على المحور z مما يؤدي إلى إنشاء تأثير الانبثاق عندما نمر فوق الصف ويتم إضافة فئة التحويل ثلاثية الأبعاد إلى كل عنصر.

.et-card-image.transform-3d {
transform: translateZ(150px) rotateZ(10deg) !important;
}
.et-card-heading.transform-3d {
transform: translateZ(150px) !important;
}
.et-card-info.transform-3d {
transform: translateZ(50px) !important;
}
.et-mousemove-card .et_pb_button_module_wrapper.transform-3d {
transform: translateZ(150px) rotateX(20deg) !important;
}

مسج

أولاً ، نعلن عن جميع المتغيرات اللازمة لاستهداف العناصر وفقًا لفئتها المخصصة.

//Items
var $hoverContainer = $(".et-hover-container");
var $mousemoveCard = $(".et-mousemove-card");
var $cardImage = $(".et-card-image");
var $cardHeading = $(".et-card-heading");
var $cardInfo = $(".et-card-info");
var $cardButton = $(".et-mousemove-card .et_pb_button_module_wrapper");

ثم نقوم بإرفاق حدث mousemove بالصف (أو حاوية التمرير) بوظيفة تحسب موضع المؤشر لكل من المحور X و Y في نافذة المتصفح ثم تقوم بتدوير بطاقة mousemove (أو العمود) مثل X و Y تتغير القيم ديناميكيًا.

//Moving Animation Event
$hoverContainer.on("mousemove", function (e) {
let xAxis = (window.innerWidth / 2 - e.clientX) / 25;
let yAxis = (window.innerHeight / 2 - e.clientY) / 25;
$mousemoveCard.css(
"transform",
`rotateY(${xAxis}deg) rotateX(${yAxis}deg)`
);
});

لتنشيط تحويل CSS (مع translateZ) الذي ينقل عناصر البطاقة في مساحة Z ، نقوم بتبديل فئة التحويل ثلاثي الأبعاد إلى كل عنصر عند التمرير فوق الصف (أو حاوية التمرير).

//Animate on Hover
$hoverContainer.hover(function () {
$mousemoveCard.toggleClass("transform-3d");
$cardHeading.toggleClass("transform-3d");
$cardImage.toggleClass("transform-3d");
$cardButton.toggleClass("transform-3d");
$cardInfo.toggleClass("transform-3d");
});

ثم نحتاج إلى إرفاق حدث mouseleave بالصف بوظيفة تضيف خاصية تحويل CSS مع الدالتين rotateY و rotateX إلى 0 درجة. سيؤدي هذا إلى عودة العمود (أو البطاقة) إلى مكانه عندما يتحرك المؤشر خارج الصف.

//Pop Back on mouseleave
$hoverContainer.on("mouseleave", function () {
$mousemoveCard.css("transform", `rotateY(0deg) rotateX(0deg)`);
});

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

تحقق من النتيجة النهائية!

يمكنك أيضًا التحقق من رمز الشفرة هذا لمشاهدة عرض توضيحي مباشر للتأثير.

افكار اخيرة

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

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

هتافات!