Flat Notifications - FlatNotify.js v0.1

Developer
Saransh Sinha
Size
6,826 Kb
Views
32,384
  1. Flat Notifications - FlatNotify.js v0.1 Previews
  2. Flat Notifications - FlatNotify.js v0.1 HTML Codes
  3. Flat Notifications - FlatNotify.js v0.1 CSS Codes
  4. Flat Notifications - FlatNotify.js v0.1 JS Codes

How do I make an flat notifications - flatnotify.js v0.1?

This is a Javascript plugin I am working on for floating notifications. It is a work in progress.. What is a flat notifications - flatnotify.js v0.1? How do you make a flat notifications - flatnotify.js v0.1? This script and codes were developed by Saransh Sinha on 09 September 2022, Friday.

Flat Notifications - FlatNotify.js v0.1 Previews
IQ Test

Flat Notifications - FlatNotify.js v0.1 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flat Notifications - FlatNotify.js v0.1</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background: #eee; font-family: "Brandon Grotesque", Avenir, "Lato", sans-serif;
}
.title-container { margin: 120px auto 0; text-align: center; width: 350px;
}
.title-container .title { font-size: 40px; margin-bottom: 15px;
}
.title-container .sub-title { text-decoration: none; font-size: 20px; color: #D3D3D3;
}
.button-container { width: 438px; height: 78px; margin: 40px auto 0;
}
.button-container a { text-decoration: none; padding: 20px 0; width: 130px; text-align: center; margin: 20px 6px; display: inline-block; color: #FFF; font-size: 20px; border-radius: 5px; transition: all 0.3s;
}
.button-container a.success { background: #2ecc71;
}
.button-container a.error { background: #e74c3c;
}
.button-container a.alert { background: #f1c40f;
}
.button-container a:hover { opacity: 0.6;
}
.f-notification { position: fixed; bottom: 20px; right: 20px; text-align: left; width: 300px; min-height: 20px; padding: 20px 40px 20px 18px; border-radius: 5px; color: rgba(255, 255, 255, 0.85);
}
.f-notification:hover { opacity: 0.9;
}
.f-notification:hover .f-notification-close { background: rgba(77, 77, 79, 0.1);
}
.f-notification .f-notification-title { font-weight: 600; color: #4D4D4F; cursor: default;
}
.f-notification .f-close { position: absolute; right: 15px; top: 20px; height: 20px; width: 20px; line-height: 18px; vertical-align: middle; text-align: center; border-radius: 20px; color: #4D4D4F; cursor: pointer; background: rgba(255, 255, 255, 0.25);
}
.f-notification .f-close:hover { background: rgba(77, 77, 79, 0.2);
}
.f-notification-success { background: #2ecc71;
}
.f-notification-error { background: #e74c3c;
}
.f-notification-alert { background: #f1c40f;
}
.f-show { animation-name: animSlideElastic; animation-duration: 1s; animation-timing-function: linear;
}
.f-hide { animation-name: animSlideElastic; animation-duration: 0.5s; animation-direction: reverse;
}
@keyframes animSlideElastic { 0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1000, 0, 0, 1); } 3.333333% { transform: matrix3d(1.96989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 521.82545, 0, 0, 1); } 6.666667% { transform: matrix3d(1.4235, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 218.3238, 0, 0, 1); } 10% { transform: matrix3d(1.08167, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 57.59273, 0, 0, 1); } 13.333333% { transform: matrix3d(0.99057, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -11.12794, 0, 0, 1); } 16.666667% { transform: matrix3d(0.98719, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -30.40503, 0, 0, 1); } 20% { transform: matrix3d(0.99541, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -28.10141, 0, 0, 1); } 23.333333% { transform: matrix3d(0.99936, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -19.40752, 0, 0, 1); } 26.666667% { transform: matrix3d(1.00021, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -11.08575, 0, 0, 1); } 30% { transform: matrix3d(1.00016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -5.23737, 0, 0, 1); } 33.333333% { transform: matrix3d(1.00005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -1.84893, 0, 0, 1); } 36.666667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.22079, 0, 0, 1); } 40% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.37284, 0, 0, 1); } 43.333333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.46116, 0, 0, 1); } 46.666667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.35963, 0, 0, 1); } 50% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.22487, 0, 0, 1); } 53.333333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.11734, 0, 0, 1); } 56.666667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.04909, 0, 0, 1); } 60% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.01295, 0, 0, 1); } 63.333333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.0025, 0, 0, 1); } 66.666667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00684, 0, 0, 1); } 70% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00632, 0, 0, 1); } 73.333333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00436, 0, 0, 1); } 76.666667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00249, 0, 0, 1); } 80% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00118, 0, 0, 1); } 83.333333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00042, 0, 0, 1); } 86.666667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00005, 0, 0, 1); } 90% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00008, 0, 0, 1); } 93.333333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.0001, 0, 0, 1); } 96.666667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00008, 0, 0, 1); } 100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<div class='title-container'> <div class='title'> FlatNotifiy.js v0.1 </div> <a class='sub-title' href='https://www.twitter.com/screenshake' target='_blank'> Super simple notifications by @screenshake </a>
</div>
<div class='button-container'> <a class='alert' href='#' onclick="flatNotify().alert('Testing Alert Notification',2000)">Alert</a> <a class='success' href='#' onclick="flatNotify().success('Testing Success Notification with a two line message. Sweet right?',1500)">Success</a> <a class='error' href='#' onclick="flatNotify().error('Testing Error Notification with a really long message. I mean come on? Who notifies people like this? This is so wrong on so many levels.',3000)">Error</a>
</div> <script src='http://yourjavascript.com/30914111154/classie.js'></script> <script src="js/index.js"></script>
</body>
</html>

Flat Notifications - FlatNotify.js v0.1 - Script Codes CSS Codes

body { background: #eee; font-family: "Brandon Grotesque", Avenir, "Lato", sans-serif;
}
.title-container { margin: 120px auto 0; text-align: center; width: 350px;
}
.title-container .title { font-size: 40px; margin-bottom: 15px;
}
.title-container .sub-title { text-decoration: none; font-size: 20px; color: #D3D3D3;
}
.button-container { width: 438px; height: 78px; margin: 40px auto 0;
}
.button-container a { text-decoration: none; padding: 20px 0; width: 130px; text-align: center; margin: 20px 6px; display: inline-block; color: #FFF; font-size: 20px; border-radius: 5px; transition: all 0.3s;
}
.button-container a.success { background: #2ecc71;
}
.button-container a.error { background: #e74c3c;
}
.button-container a.alert { background: #f1c40f;
}
.button-container a:hover { opacity: 0.6;
}
.f-notification { position: fixed; bottom: 20px; right: 20px; text-align: left; width: 300px; min-height: 20px; padding: 20px 40px 20px 18px; border-radius: 5px; color: rgba(255, 255, 255, 0.85);
}
.f-notification:hover { opacity: 0.9;
}
.f-notification:hover .f-notification-close { background: rgba(77, 77, 79, 0.1);
}
.f-notification .f-notification-title { font-weight: 600; color: #4D4D4F; cursor: default;
}
.f-notification .f-close { position: absolute; right: 15px; top: 20px; height: 20px; width: 20px; line-height: 18px; vertical-align: middle; text-align: center; border-radius: 20px; color: #4D4D4F; cursor: pointer; background: rgba(255, 255, 255, 0.25);
}
.f-notification .f-close:hover { background: rgba(77, 77, 79, 0.2);
}
.f-notification-success { background: #2ecc71;
}
.f-notification-error { background: #e74c3c;
}
.f-notification-alert { background: #f1c40f;
}
.f-show { animation-name: animSlideElastic; animation-duration: 1s; animation-timing-function: linear;
}
.f-hide { animation-name: animSlideElastic; animation-duration: 0.5s; animation-direction: reverse;
}
@keyframes animSlideElastic { 0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1000, 0, 0, 1); } 3.333333% { transform: matrix3d(1.96989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 521.82545, 0, 0, 1); } 6.666667% { transform: matrix3d(1.4235, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 218.3238, 0, 0, 1); } 10% { transform: matrix3d(1.08167, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 57.59273, 0, 0, 1); } 13.333333% { transform: matrix3d(0.99057, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -11.12794, 0, 0, 1); } 16.666667% { transform: matrix3d(0.98719, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -30.40503, 0, 0, 1); } 20% { transform: matrix3d(0.99541, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -28.10141, 0, 0, 1); } 23.333333% { transform: matrix3d(0.99936, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -19.40752, 0, 0, 1); } 26.666667% { transform: matrix3d(1.00021, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -11.08575, 0, 0, 1); } 30% { transform: matrix3d(1.00016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -5.23737, 0, 0, 1); } 33.333333% { transform: matrix3d(1.00005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -1.84893, 0, 0, 1); } 36.666667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.22079, 0, 0, 1); } 40% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.37284, 0, 0, 1); } 43.333333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.46116, 0, 0, 1); } 46.666667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.35963, 0, 0, 1); } 50% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.22487, 0, 0, 1); } 53.333333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.11734, 0, 0, 1); } 56.666667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.04909, 0, 0, 1); } 60% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.01295, 0, 0, 1); } 63.333333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.0025, 0, 0, 1); } 66.666667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00684, 0, 0, 1); } 70% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00632, 0, 0, 1); } 73.333333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00436, 0, 0, 1); } 76.666667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00249, 0, 0, 1); } 80% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00118, 0, 0, 1); } 83.333333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00042, 0, 0, 1); } 86.666667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00005, 0, 0, 1); } 90% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00008, 0, 0, 1); } 93.333333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.0001, 0, 0, 1); } 96.666667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00008, 0, 0, 1); } 100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}

Flat Notifications - FlatNotify.js v0.1 - Script Codes JS Codes

/** * * flatNotify.js v0.1 * @screenshake * * Inspired by : * https://tympanus.net/codrops/2014/07/23/notification-styles-inspiration/ * * Animation courtesy : * bounce.js - http://bouncejs.com/ * * Class manipulation * classie.js https://github.com/desandro/classie * */
;( function( window ) { var proto_methods = { options: { wrapper: document.body, dismissIn: 5000 }, init: function() { this.ntf = document.createElement('div'); this.ntf.className = 'f-notification'; var strinner = '<div class="f-notification-inner"></div><div class="f-close">x</div></div>'; this.ntf.innerHTML = strinner; // append to body or the element specified in options.wrapper this.options.wrapper.insertBefore(this.ntf, this.options.wrapper.lastChild); // init events this.initEvents(); }, initEvents: function() { var self = this; // dismiss notification this.ntf.querySelector('.f-close').addEventListener('click', function() { self.dismiss(); }); }, dismiss: function() { var self = this; clearTimeout(this.dismissttl); classie.remove(self.ntf, 'f-show'); setTimeout(function() { classie.add(self.ntf, 'f-hide'); }, 25); setTimeout(function() { self.options.wrapper.removeChild( self.ntf ); }, 500); }, setType: function(newType) { var self = this; classie.remove(self.ntf, 'f-notification-error'); classie.remove(self.ntf, 'f-notification-alert'); classie.remove(self.ntf, 'f-notification-success'); classie.add(self.ntf, newType); }, success: function(message, dismissIn) { var self = this; /** * Use supplied dismiss timeout if present, else uses default value. * If set to 0, doesnt automatically dismiss. */ dismissIn = (typeof dismissIn === "undefined") ? this.options['dismissIn'] : dismissIn; /** * Set notification type styling */ self.setType('f-notification-success'); self.ntf.querySelector('.f-notification-inner').innerHTML = message; classie.remove(self.ntf, 'f-hide'); classie.add(self.ntf, 'f-show'); if (dismissIn > 0) { this.dismissttl = setTimeout(function() { self.dismiss(); }, dismissIn); } }, error: function(message, dismissIn) { var self = this; /** * Use supplied dismiss timeout if present, else uses default value. * If set to 0, doesnt automatically dismiss. */ dismissIn = (typeof dismissIn === "undefined") ? this.options['dismissIn'] : dismissIn; /** * Set notification type styling */ self.setType('f-notification-error'); self.ntf.querySelector('.f-notification-inner').innerHTML = message; classie.remove(self.ntf, 'f-hide'); classie.add(self.ntf, 'f-show'); if (dismissIn > 0) { this.dismissttl = setTimeout(function() { self.dismiss(); }, dismissIn); } }, alert: function(message, dismissIn) { var self = this; /** * Use supplied dismiss timeout if present, else uses default value. * If set to 0, doesnt automatically dismiss. */ dismissIn = (typeof dismissIn === "undefined") ? this.options['dismissIn'] : dismissIn; /** * Set notification type styling */ self.setType('f-notification-alert'); self.ntf.querySelector('.f-notification-inner').innerHTML = message; classie.remove(self.ntf, 'f-hide'); classie.add(self.ntf, 'f-show'); if (dismissIn > 0) { this.dismissttl = setTimeout(function() { self.dismiss(); }, dismissIn); } } }, flatNotify, _flatNotifiy; _flatNotifiy = function() { this.init(); }; _flatNotifiy.prototype = proto_methods; flatNotify = function() { return new _flatNotifiy(); }; /** * add to global namespace */ window.flatNotify = flatNotify;
} )( window );
Flat Notifications - FlatNotify.js v0.1 - Script Codes
Flat Notifications - FlatNotify.js v0.1 - Script Codes
Home Page Home
Developer Saransh Sinha
Username saransh
Uploaded September 09, 2022
Rating 4.5
Size 6,826 Kb
Views 32,384
Do you need developer help for Flat Notifications - FlatNotify.js v0.1?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Saransh Sinha (saransh) Script Codes
Name
Readr for Reddit
New Pen
A Pen by Saransh Sinha
COSMOS Title Card CSS3
Finding Snoo
Gravity Animated Poster
House Of Cards Animated Logo
SERIAL Logo - single element
The Space Game Concept screen
Parallax Star background in CSS
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!