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

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

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

النتيجة المحتملة

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

إنشاء عدادات الدائرة الأربعة التي تنبض بالحياة عند التمرير باستخدام Divi

تكوين القسم والخط

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

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

الهامش: 85vh عالية ، 85vh منخفضة

ثم افتح إعدادات الخط وقم بتحديث ما يلي:

عرض مزراب: 1
العرض: 100٪
العرض الأقصى: 1200 بكسل

باستخدام عرض الطبقات

قبل البدء في إنشاء عدادات الدائرة المتحركة ، تأكد من نشر وظيفة Divi Layers. يمكنك القيام بذلك عن طريق النقر على أيقونة الطبقات الرمادية في قائمة الإعدادات السفلية.

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

إنشاء عداد دائري متحرك # 1 (25٪)

سيعمل عداد الدائرة المتحرك الأول هذا على تحريك ما يصل إلى 25٪ من الدائرة في التمرير وستكون النسبة المئوية للنص المطابق للمركز الذي سيتم دمجه في التمرير. لبناء تصميم عداد دائري كامل ، سنستخدم عدة فواصل نصية ووحدات نمطية متداخلة. هيريس كيفية القيام بذلك.

الدائرة الخلفية

لإنشاء الدائرة الخلفية ، سنستخدم وحدة فاصلة سنشكلها كدائرة ونعطيها لون خلفية.

أضف وحدة فصل

اسحب الحاجز لأعلى في عرض الطبقة وقم بتغيير التسمية إلى "backcircle". ثم افتح إعدادات وحدة الفصل وقم بتحديث ما يلي:

إظهار الحاجز: NO
لون الخلفية: # c3e0e5

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

العرض: 250 بكسل
الارتفاع: 250px
الهامش: 25 بكسل في الأعلى ، 25 بكسل في الأسفل ، 25 بكسل في اليسار
زوايا مدورة: 50٪

شريط اللون الدوار

سيكون الجزء التالي من عداد الدائرة هو شريط الألوان الدوار. كرر الفاصل السابق (الدائرة الخلفية) لإعادة تشغيل التصميم. ثم قم بتحديث الفاصل الجديد بالتسمية "colorbar".

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

افتح إعدادات فاصل شريط الألوان وقم بتحديث ما يلي:

لون الخلفية: لا شيء
خلفية التدرج اللوني الأيسر: # 121b55
لون خلفية التدرج على اليمين: رجب (255,255,255,0،XNUMX،XNUMX،XNUMX)
اتجاه التدرج: 90deg
وضع البدء: 50٪
الوضع النهائي: 0٪

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

العرض: 248px
الارتفاع: 248px

لجعل دائرة شريط الألوان تتداخل مع الدائرة الخلفية ، امنح المقسم وضعًا مطلقًا كما يلي:

الموقف: مطلق
إزاحة رأسية: 26 بكسل
إزاحة أفقية: 26 بكسل

ثم أضف تأثير التمرير التالي لتدوير الشريط الدائري 90 درجة (أو 25٪ من الدائرة).

تحت علامة التبويب تأثيرات دوارة ...

بدء التدوير: 0 درجة (بنسبة 15٪ من النافذة)
متوسط الدوران: 90 درجة (عند 20٪ -25٪ من منفذ العرض)
نهاية الدوران: 90 درجة (عند 30٪ من منفذ العرض)

قد لا يبدو أن النسب المئوية وقيم التدوير هنا منطقية تمامًا في هذه المرحلة. نجعل من السهل تحديث الدوران لاحقًا عندما نبني عداد الدائرة التالي الذي ينتهي عند 180 درجة (50٪ من الدائرة). الشيء المهم في هذه المرحلة هو أن الدوران ينتهي عند 90 درجة (أو 25٪).

الدرع

العنصر التالي في عداد الدائرة لدينا هو ما أسميه الدرع ، وهو نصف دائرة آخر يخفي الجانب الأيسر من دائرة شريط الألوان أثناء دورانه.

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