تنبيهات منبثقة وموقوتة باستخدام حركيات 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.



3 اشخاص أعجبوا بهذا


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


مقال اكثر من رائع

بارك الله فيك

شارك هذا التعليق


رابط هذا التعليق
شارك على الشبكات الإجتماعية

بارك الله فيك موضوع جيد و مفيد حقا

شارك هذا التعليق


رابط هذا التعليق
شارك على الشبكات الإجتماعية


يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن