كيفية تصميم ساعة متحركة مع تأثيرات التمرير لديفي
نشرت: 2020-07-20الويب مليء بالمواقع التي تحتاج إلى تصميمات ذات صلة بالوقت (تحسين السرعة ، والأحداث القادمة ، وما إلى ذلك). في معظم الحالات ، يمكن أن يعمل رمز الساعة أو الرسم بشكل رائع. ولكن ، إنشاء تصميم ساعة متحركة سيعطي بالتأكيد "دورانًا" فريدًا لتصميم موقع الويب الخاص بك.
مع كل خيارات التصميم المضمنة المتوفرة في Divi ، يمكننا إنشاء تصميم ساعة متحركة رائع من البداية. في هذا البرنامج التعليمي ، سنقوم بإنشاء ساعة متحركة تعمل على إدارة عقارب الساعة أثناء قيام المستخدم بالتمرير لأسفل الصفحة.
هيا بنا نبدأ!
نظرة خاطفة
فيما يلي نظرة سريعة على التصميم الذي سنقوم ببنائه في هذا البرنامج التعليمي.
قم بتنزيل Animated Clock Layout مجانًا
لتضع يديك على التصميمات من هذا البرنامج التعليمي ، ستحتاج أولاً إلى تنزيلها باستخدام الزر أدناه. للوصول إلى التنزيل ، ستحتاج إلى الاشتراك في قائمة البريد الإلكتروني Divi Daily الخاصة بنا باستخدام النموذج أدناه. بصفتك مشتركًا جديدًا ، ستتلقى المزيد من مزايا Divi وحزمة Divi Layout المجانية كل يوم اثنين! إذا كنت موجودًا بالفعل في القائمة ، فما عليك سوى إدخال عنوان بريدك الإلكتروني أدناه والنقر فوق تنزيل. لن يتم "إعادة اشتراكك" ولن تتلقى رسائل بريد إلكتروني إضافية.
تنزيل مجاني
انضم إلى رسالة Divi الإخبارية وسنرسل لك نسخة من حزمة Divi Landing Page Layout النهائية ، بالإضافة إلى الكثير من موارد ونصائح وحيل Divi المذهلة والمجانية الأخرى. تابع معنا وستكون سيد Divi في أي وقت من الأوقات. إذا كنت مشتركًا بالفعل ، فاكتب ببساطة عنوان بريدك الإلكتروني أدناه وانقر فوق تنزيل للوصول إلى حزمة التخطيط.
لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!
لاستيراد تخطيط القسم إلى مكتبة Divi الخاصة بك ، انتقل إلى مكتبة Divi.
انقر فوق الزر "استيراد".
في نافذة قابلية النقل المنبثقة ، حدد علامة التبويب استيراد واختر ملف التنزيل من جهاز الكمبيوتر الخاص بك.
ثم انقر فوق زر الاستيراد.
بمجرد الانتهاء من ذلك ، سيكون تخطيط القسم متاحًا في Divi Builder.
دعنا نصل إلى البرنامج التعليمي ، أليس كذلك؟
ما تحتاجه للبدء
للبدء ، سوف تحتاج إلى القيام بما يلي:
- إذا لم تكن قد قمت بذلك بعد ، فقم بتثبيت وتفعيل Divi Theme.
- قم بإنشاء صفحة جديدة في WordPress واستخدم Divi Builder لتحرير الصفحة على الواجهة الأمامية (منشئ مرئي).
- اختر الخيار "البناء من الصفر".
بعد ذلك ، سيكون لديك لوحة فارغة لبدء التصميم في Divi.
الجزء 1: تصميم وجه الساعة
للبدء ، أضف صفًا من عمود واحد إلى القسم العادي.
إعدادات الصف
قبل إضافة أي وحدات نمطية ، افتح إعدادات الصف وقم بتحديث ما يلي:
- لون الخلفية: # 003a5c
ضمن علامة تبويب التصميم ، قم بتحديث ما يلي:
- عرض الحضيض: 1
- العرض: 50vw
- العرض الأقصى: 500 بكسل
- الارتفاع: 50vw
- أقصى ارتفاع: 500 بكسل
- زوايا دائرية: 50٪
- عرض الحدود: 15 بكسل
- لون الحدود: #ffffff
- Box Shadow: انظر لقطة الشاشة
- مربع الظل الوضع الرأسي: 0 بكسل
- قوة مربع الظل الضبابية: 68 بكسل
- لون الظل: rgba (0،0،0،0.22)
ضمن علامة التبويب خيارات متقدمة ، قم بتحديث خيارات الرؤية على النحو التالي:
- الفائض الأفقي: مخفي
- الفائض العمودي: مخفي
الجزء 2: إضافة علامات الساعة
بمجرد تصميم الصف كوجه ساعة ، نكون مستعدين لإضافة علامات الساعة التي تمثل الساعة الثانية عشرة والساعة الثالثة والسادسة والساعة التاسعة. سيتم إنشاء كل علامة باستخدام وحدة فاصل.
علامة الساعة 12
ابدأ بإضافة وحدة فاصل جديدة داخل الصف.
ثم قم بتحديث لون الخلفية كما يلي:
- لون الخلفية: # 78acf4
- العرض: 10vw
- العرض الأقصى: 150 بكسل
- الارتفاع: 3 بكسل
- الزوايا الدائرية: 8 بكسل
- تحويل تدوير المحور Z: 90 درجة
تحت علامة التبويب "خيارات متقدمة" ، امنح الحاجز موضعًا مطلقًا:
- الموقف: مطلق
- الموقع: أعلى الوسط
علامة الساعة 6
لإنشاء علامة الساعة 3 ، قم بتكرار الحاجز المستخدم لإنشاء علامة الساعة 12 0. (في هذه المرحلة ، من الجيد تسمية الوحدات النمطية الخاصة بك داخل نموذج الطبقات.) ثم افتح الحاجز المكرر وقم بتحديث موقع الموضع على النحو التالي:
- الموقع: مركز القاع
الساعة الثالثة محدد
لإنشاء علامة الساعة 3 ، قم بتكرار علامة الساعة 6. ثم افتح إعدادات النسخة الجديدة (تأكد من تسميتها "الساعة 3") وقم بتغيير ما يلي:
- الموقع: المركز الأيمن
ثم قم بتحديث خيارات التحويل كما يلي:
ضمن علامة تبويب الترجمة ...
- تحويل ترجمة المحور س: 50٪
تحت علامة التبويب التناوب
- تحويل تدوير المحور Z: 0 درجة
علامة الساعة التاسعة
لإنشاء علامة الساعة 3 ، قم بتكرار علامة الساعة 6. ثم افتح إعدادات النسخة الجديدة (تأكد من تسميتها "الساعة 9") وقم بتغيير ما يلي:
- الموقع: يسار الوسط
ثم قم بتحديث خيارات التحويل كما يلي:
ضمن علامة تبويب الترجمة ...
- تحويل المحور X للترجمة: -50٪
الجزء 3: إنشاء عقارب الساعة (ثانية ، دقيقة ، وساعة)
بمجرد وضع علامات الساعة ، نكون مستعدين لبدء إنشاء عقارب الساعة. سنبدأ من جهة ثانية.
من جهة ثانية
لإنشاء عقرب الثواني ، قم بتكرار مقسم الساعة 12 واسحبه أسفل بقية المقسمات في العمود باستخدام نموذج الطبقات.
ثم قم بتسمية النسخة الجديدة "الثانية".
افتح إعدادات الوحدة وقم بتحديث الموضع ضمن علامة التبويب خيارات متقدمة:
- الموقع: مركز المركز
ضمن علامة تبويب التصميم ، قم بتحديث الحجم على النحو التالي:
- العرض: 20vw
- العرض الأقصى: 200 بكسل
- الارتفاع: 0.5vw
- أقصى ارتفاع: 7.5 بكسل
الآن يوجد عقرب الثواني في منتصف وجه الساعة ، لكننا نريد أن يبدأ الجزء السفلي من عقرب الثواني من المركز مثل عقرب الساعة العادي. ثم نريد أن يظل الجزء السفلي من العقرب في المركز كأصل محوري حتى يتمكن العقرب من الدوران كما لو كان في الساعة الفعلية. للقيام بذلك ، سنحتاج إلى استخدام مجموعة من خيارات التحويل لوضع الحاجز وتدويره من أصل تحويل محدد.
قم بتحديث ما يلي:
ضمن علامة تبويب الترجمة ...
- Transform Translate X Axis: 0٪ (هذه خطوة مهمة)
ضمن علامة التبويب "التناوب" ...
- تحويل تدوير المحور Z: -90 درجة
ضمن علامة التبويب الأصل ...
- أصل التحويل: مركز اليسار
نظرًا لأن هذه اليد ستتحرك بسرعة كبيرة بمجرد إضافة تأثير التمرير ، فلنمنحه لون خلفية شبه شفاف حتى لا يكون مشتتًا للغاية.
- لون الخلفية: rgba (175،175،175،0.12)
عقرب الدقائق
لإنشاء عقرب الدقائق ، قم بتكرار وحدة عقرب الثواني وقم بتسمية "الدقيقة" المكررة. ثم افتح وحدة التقسيم الجديدة وقم بتحديث لون الخلفية:
- خلفية متدرجة اللون الأيسر: # 78acf4
- تدرج الخلفية اللون الأيمن: # b0b9ff
- اتجاه التدرج: 90 درجة
ثم قم بتحديث التصميم على النحو التالي:
- العرض: 15 واط
- العرض الأقصى: 150 بكسل
- الارتفاع: 1vw
- أقصى ارتفاع: 15 بكسل
عقرب الساعة
بمجرد اكتمال عقرب الدقائق ، قم بتكرار وحدة عقرب الثواني وقم بتسمية النسخة المكررة "ساعة". ثم افتح وحدة التقسيم الجديدة وقم بتحديث لون الخلفية كما يلي:
- لون الخلفية: #ffffff
ثم قم بتحديث الحجم ضمن علامة تبويب التصميم على النحو التالي:
- العرض: 10vw
- العرض الأقصى: 100 بكسل
في هذه المرحلة ، ستكون جميع عقارب الساعة الثلاثة جاهزة لتأثيرات التمرير!
الجزء 4: إضافة تأثيرات تمرير الدوران لكل عقرب ساعة
لتدوير عقارب الساعة ، سنضيف تأثير تمرير الدوران إلى كل من عقارب الساعة الثلاثة. نظرًا لأننا نعمل على تصميم ساعة ، فمن المهم أن نتذكر أنه يمكننا استخدام درجات الدوران على كل عقرب ساعة لتمثيل الوقت الفعلي. على سبيل المثال ، تدوير عقرب الساعة 30 درجة يعني الساعة 1 ، و 60 درجة ستكون الساعة 2 ، وهكذا.
تأثير التمرير لدوران عقارب الساعة
أولاً ، سنضيف تأثير تمرير الدوران إلى عقرب الساعات. افتح إعدادات مقسم عقرب الساعات وأضف تأثير التحويل التالي:
تحت علامة تبويب التناوب ...
- تمكين التدوير: نعم
- دوران بدء: 0deg (عند 10٪)
- دوران متوسط: 15 درجة (عند 50٪)
- نهاية الدوران: 30 درجة (عند 90٪)
تأثير تمرير عقرب الدقائق
بعد ذلك ، سنضيف تأثير تمرير الدوران إلى عقرب الدقائق. افتح إعدادات مقسم عقرب الدقائق وأضف تأثير التحويل التالي:
تحت علامة تبويب التناوب ...
- تمكين التدوير: نعم
- دوران بدء: 0deg (عند 10٪)
- دوران متوسط: 180 درجة (عند 50٪)
- نهاية الدوران: 360 درجة (عند 90٪)
تأثير التمرير دوران اليد الثانية
بعد ذلك ، سنضيف تأثير تمرير الدوران إلى اليد الثانية. افتح إعدادات مقسم اليد الثانية وأضف تأثير التحويل التالي:
تحت علامة تبويب التناوب ...
- تمكين التدوير: نعم
- دوران بدء: 0deg (عند 10٪)
- دوران متوسط: 5400 درجة (عند 50٪)
- نهاية الدوران: 10800 درجة (90٪)
ملاحظة: قد يتطلب الدوران الدقيق للعقرب الثاني للوصول إلى ساعة واحدة دورانًا بمقدار 21600 درجة. ولكن نظرًا لأن ذلك سريع جدًا ، فقد اعتقدت أنه من الأفضل خفض ذلك إلى النصف. بعد كل شيء ، هذا لأغراض التصميم.
النتائج النهائية
ها هو التصميم النهائي.
وهذه هي النتيجة النهائية لتأثيرات التمرير. لاحظ كيف يمر الوقت ساعة واحدة بالضبط عند التمرير لأسفل الصفحة.
افكار اخيرة
إنه لأمر مدهش جدًا أن نتمكن من تصميم ساعة مثل هذا باستخدام تأثيرات التمرير التي تمثل الوقت بدقة شديدة. لا تتردد في تجربة إضافة المزيد من تأثيرات تمرير الدوران لتسريع وإبطاء الوقت على مدار الساعة أثناء التمرير. بالإضافة إلى أنه يمكنك استخدام تصميم الساعة هذا لإبراز الكثير من عبارات الحث على اتخاذ إجراء أو الرؤوس.
أتطلع إلى الاستماع منك في التعليقات.
هتافات!