اذهب إلى المحتوى

تنبيهات منبثقة وموقوتة باستخدام حركيات CSS


نذير صغير

في هذا المقال القصير سوف نصنع تنبيها مؤقتا بسيطا عبر CSS animations. ما سنفعله بالتحديد هو إظهار تنبيه بسيط أو عبارة ما أسفل الشاشة لمدة معينة، ثم إخفائها. وسوف سنعمل شريط تقدم (progress bar) لنعرف كم تبقى من الوقت ليختفي التنبيه.

css-timed-notification.thumb.png.9f560f4

ستكون تنبيهات هذا الدرس من الشكل التالي:

21-1439316799-notif.thumb.png.1c19e88f17

بالنسبة للهيكلة فسوف نستخدم div يحتوي على الرسالة وبداخله div آخر من أجل شريط التقدم:

<div class="tn-box tn-box-color-1">
    <p>Your settings have been saved successfully!</p>
    <div class="tn-progress"></div>
</div>

سيملك التنبيه tn-box. و tn-box-color-1. من أجل تحديد اللون، سوف نثبت الصندوق أسفل النافذة حتى يرتفع عندما يظهر:

.tn-box {
    width: 360px;
    position: fixed;
    bottom: 20px;
    left: 20px;
    padding: 25px 15px;
    text-align: right;
    border-radius: 5px;
    box-shadow: 
        0 1px 1px rgba(0,0,0,0.1), 
        inset 0 1px 0 rgba(255,255,255,0.6);  
    opacity: 0;
    cursor: default;
    display: none;
    transform: translateY(30px)
}

.tn-box-color-1{
    background: #ffe691;
    border: 1px solid #f6db7b;
}

أما بالنسبة لشريط التقدم فسنعطيه التالي:

.tn-progress {
    width: 0;
    height: 4px;
    background: rgba(255,255,255,0.3);
    position: absolute;
    bottom: 5px;
    right: 2%;
    border-radius: 3px;
    box-shadow: 
        inset 0 1px 1px rgba(0,0,0,0.05), 
        0 -1px 0 rgba(255,255,255,0.6);
}

في البداية، سيكون عرض شريط التقدم 0.

في هذا المثال، أنا أستخدم checkbox من أجل إطلاق animation عندما يتم الضغط عليه:

<input type="checkbox" class="fire-check">
<section>
    <div class="tn-box tn-box-color-1">
        <p>شريط التقدم الجميل!</p>
        <div class="tn-progress"></div>
      </div>
  </section>

الزر يسبق صندوق التنبيهات لذا نستطيع استخدام محدد ~ من أجل تحديد العنصر الذي يأتي بعده.

وإذا أردت أن تتحكم بالأمر عبر جافاسكربت (عبر إضافة tn-box-active. )، فاستخدم التالي:

.tn-box.tn-box-active {
    display: block;
    animation: fadeOut 5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.tn-box.tn-box-active .tn-progress {
    animation: runProgress 4s linear forwards 0.5s;
}

أما بالنسبة للحركية (animation) فهي كالتالي:

@keyframes fadeOut {
    0%  { opacity: 0; }
    10% { opacity: 1; transform: translateY(0px);}
    90% { opacity: 1; transform: translateY(0px);}
    99% { opacity: 0; transform: translateY(30px);}
    100% { opacity: 0; }
}
@keyframes runProgress {
    0%  { width: 0%; background: rgba(255,255,255,0.3); }
    100% { width: 96%; background: rgba(255,255,255,1); }
}

ما ستقوم به الـحركية (animation) هو إظهار الصندوق (عبر رفعه ورفع درجة الشفافية) ثم تكبير عرض شريط التقدم.

حددنا عرض شريط التقدم إلى 96% (لأنه يبعد عن يمين الصندوق بـ 2% لذا نريده أن يتوقف قبل 2% من اليسار أيضا).

مثال حي

See the Pen ZbzMWQ by Hsoub Academy (@HsoubAcademy) on CodePen.

ملاحظة: شيء إضافي وجدت أنه من الجميل إضافته هو إيقاف animation عند تمرير المؤشر على الصندوق. ولكن للأسف، الأمر لم ينجح في chrome بينما نجح في فيرفكس.

.tn-box:hover, 
.tn-box:hover .tn-progress{
    animation-play-state: paused;
}

ترجمة -وبتصرف- للمقال: Timed Notifications with CSS Animations لصاحبه Mary Lou.

حقوق الصورة البارزة: Designed by Freepik.


تفاعل الأعضاء

أفضل التعليقات



انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أضف تعليق

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • أضف...