• You need 5 posts to download resources. You can only download 2 resources per day. To remove these limits consider upgrading.

XF XenForo Animated Notifications

one_finger_man

Verified
LV
0
 
Joined
Mar 23, 2023
Messages
28
Reaction score
16
Awards
3
you can add animated notification and animated private message notification to your forum. We add a moving bell and a moving shadow when notification comes.

Open the template of the theme you use to add animation to the notifications area, extra.lessadd the codes below and save.

CSS:
@keyframes xgtbell {
    0% {
        transform: rotate(0);
    }
    10% {
        transform: rotate(30deg);
    }
    20% {
        transform: rotate(0);
    }
    80% {
        transform: rotate(0);
    }
    90% {
        transform: rotate(-30deg);
    }
    100% {
        transform: rotate(0);
    }
}
@-webkit-keyframes xgtNotificationAnim {
    to {
        box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
    }
}
@-moz-keyframes xgtNotificationAnim {
    to {
        box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
    }
}
@-ms-keyframes xgtNotificationAnim {
    to {
        box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
    }
}
@keyframes xgtNotificationAnim {
    to {
        box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
    }
}
.js-badge--alerts.badgeContainer--highlighted {
    i {
        &:after {
            animation: xgtbell 1s 1s both infinite;
        }
    }
    border: none;
    box-shadow: 0 0 0 0 rgba(225, 228, 227, 0.7);
    border-radius: 10%;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    -webkit-animation: xgtNotificationAnim 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    -moz-animation: xgtNotificationAnim 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    -ms-animation: xgtNotificationAnim 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    animation: xgtNotificationAnim 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
}


bildirimanim.gif


If you want to apply it to both the private message area and the notification area, add the codes below.

dildirimDmAnim.gif

If you want the shadow movement to move separately, you can use the below codes for the custom message (DM) animation instead of the custom message less codes above.

CSS:
@keyframes xgtDM {
    0% {
        transform: rotate(0);
    }
    10% {
        transform: rotate(30deg);
    }
    20% {
        transform: rotate(0);
    }
    80% {
        transform: rotate(0);
    }
    90% {
        transform: rotate(-30deg);
    }
    100% {
        transform: rotate(0);
    }
}
@-webkit-keyframes xgtConversationsAnim {
    to {
        box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
    }
}
@-moz-keyframes xgtConversationsAnim {
    to {
        box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
    }
}
@-ms-keyframes xgtConversationsAnim {
    to {
        box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
    }
}
@keyframes xgtConversationsAnim {
    to {
        box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
    }
}
.js-badge--conversations.badgeContainer--highlighted {
    i {
        &:after {
            animation: xgtDM 1s 1s both infinite;
        }
    }
    border: none;
    box-shadow: 0 0 0 0 rgba(225, 228, 227, 0.7);
    border-radius: 10%;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    -webkit-animation: xgtConversationsAnim 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
    -moz-animation: xgtConversationsAnim 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
    -ms-animation: xgtConversationsAnim 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
    animation: xgtConversationsAnim 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
}
 
Top