25+ JavaScript Notifications - Free Code + Demos
Collection of 25+ JavaScript Notifications. All items are 100% free and open-source. The list also includes boxes javascript notifications.
1. Pulsing Notification
Just what it looks like.
Author: Derek Wheelden (frxnz)
Links: Source Code / Demo, Dribbble Shot
Created on: January 12, 2014
Made with: HTML, SCSS
Tags: css3, animation, keyframe, pulsing, notification
2. Notification Bell
Design a notification component where an SVG icon is animated while a message is introduced from the side. Entry for the 16th weekly coding challenge.
Author: Gabriele Corti (borntofrappe)
Links: Source Code / Demo
Created on: July 11, 2019
Made with: HTML, CSS, JS
Tags: weeklycodingchallenge, notification, svg, bell
3. Notification-cards-animation
An experiment of animation with css and javascript which puts in scene notification cards that animate when a card is deleted or archived.
Author: VERDIEU Steeve (flatpixels)
Links: Source Code / Demo
Created on: April 24, 2019
Made with: HTML, CSS, JS
Tags: css-animation, ui-design, javascript vanilla, animation with javascript
4. Funky Notification With Shape Interaction
Author: Ryan (ryanparag)
Links: Source Code / Demo
Created on: February 11, 2019
Made with: Pug, SCSS, Babel
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: svg, toggle, generate, night mode, dark mode
5. Pop Up Social Feed Notification
Author: Nooray Yemon (yemon)
Links: Source Code / Demo
Created on: July 3, 2018
Made with: HTML, CSS
6. Android Music Notification
The Android notification for music. Long press (hold mouse) to trigger animation.
Author: Cory L (TheVVaFFle)
Links: Source Code / Demo
Created on: May 1, 2018
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: android, music, notification, effect, animated
7. Notification Bell
Author: Jonatan Sosa (jjonatansosa)
Links: Source Code / Demo
Created on: April 12, 2018
Made with: HTML, CSS, JS
8. Untitled
Author: Mihai Veronica (Veronica-mihai)
Links: Source Code / Demo
Created on: January 29, 2019
Made with: HTML, JS
9. Stripe Notification Animation
Author: ninja (shradhan)
Links: Source Code / Demo
Created on: December 8, 2017
Made with: HTML, SCSS, JS
10. Notyf
👻 A minimalistic, responsive, vanilla JavaScript library to show toast notifications.
Links: Github Page, Demo Page
Created on: August 31, 2016
11. Notie
🔔 a clean and simple notification, input, and selection suite for javascript, with no dependencies
Links: Github Page, Demo Page
Created on: November 5, 2015
12. Notification Bell
Author: Ryan Morr (ryanmorr)
Links: Source Code / Demo
Created on: June 15, 2015
Made with: HTML, CSS, JS
Tags: notification, alert, bell
13. Noty
Dependency-free notification library that makes it easy to create alert - success - error - warning - information - confirmation messages as an alternative the standard alert dialog.
Links: Github Page, Home Page
Created on: January 28, 2012
14. Pure JavaScript Notifications
Simple JavaScript notification display, fading after some time.
Author: McSwampy (McSwampy)
Links: Source Code / Demo
Created on: January 17, 2020
Made with: HTML, Less, JS
Tags: javascript, notification, notifications, fade
15. Fancy Notifications
Just a simple and beautiful notification control.
Author: Mitsu (MitsuGM)
Links: Source Code / Demo
Created on: April 2, 2016
Made with: HTML, Less, JS
Tags: notifications
16. Cookie Notification Js
Forked from StudioKlik's Pen cookie notification js.
Author: Ryan (Ryie)
Links: Source Code / Demo
Created on: July 13, 2018
Made with: HTML, CSS, JS
17. Simple Notifications Solution, Custom Out Animations
Author: Paulina Hetman (pehaa)
Links: Source Code / Demo
Created on: August 25, 2018
Made with: HTML, CSS, JS
18. Notifs - Clean, Yet Beautiful Notifications In Your Website
Pure html/css/js(ts) notifications plugin with clean design. Usage: copy short snippet in html, add css and ts(js) to your project. Choose between light/dark mode, notification content type. Set position where notification will spawn - right side, bottom right corner, whole screen. ...Read More
Author: Vít Štefan (vitstefan)
Links: Source Code / Demo
Created on: June 29, 2020
Made with: HTML, CSS, TypeScript
Tags: notifications, clean-notifications, clean-design, pure-htmlcssjs
19. Sidebar Notification Layout
Responsive layout for a notification interface that can be toggled to a sidebar
Author: Eze (talentedunicorn)
Links: Source Code / Demo
Created on: February 24, 2020
Made with: HTML, SCSS, JS
Tags: css, notifications, layout, grid, sidebar
20. Simple Toast Notifications (With Vanillajs)
Author: Stanislav (Beaglefoot)
Links: Source Code / Demo
Created on: September 29, 2019
Made with: HTML, SCSS, JS
Tags: toast, notifications, toaster, vanillajs, reinventing the wheel
21. Notiflix - Notify
https://www.notiflix.com/#Notify
Author: Notiflix JS (notiflix)
Links: Source Code / Demo
Created on: February 28, 2019
Made with: HTML, CSS, JS
Tags: notification, notifications, javascript, library, notiflix
22. Thanks For Notifications
Playing with making use of emojis in the interface and keyframes to achieve a slap motion effect. Some JS added for click event interactions and setting an emoji cursor.
Author: Piotr Galor (pgalor)
Links: Source Code / Demo
Created on: November 11, 2018
Made with: HTML, CSS, JS
Tags: ui, animation, notification, notifications, emoji
23. Notifs
Experimenting on fictional notifications
Author: Lucagez (lucagez)
Links: Source Code / Demo
Created on: November 6, 2018
Made with: HTML, CSS, JS
Tags: notifications, animation, notif
24. IOS 12 Dark Mode Notifications
Author: Gabrielle Wee 🧧 (gabriellewee)
Links: Source Code / Demo
Made with: Haml, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
More Awesome Lists:
Share: