Preview
Source Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->
<style>
@font-face {
font-family: 'Source Sans Pro';
src: url('https://cdn.jsdelivr.net/npm/source-sans-pro@2.40.0/TTF/SourceSansPro-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Source Sans Pro SemiBold';
src: url('https://cdn.jsdelivr.net/npm/source-sans-pro@2.40.0/TTF/SourceSansPro-Semibold.ttf') format('truetype');
}
html {
font-family: 'Source Sans Pro', sans-serif;
background: #000;
height: 100%;
color: #fff;
font-size: 10px;
box-sizing: border-box;
overflow: hidden;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
h1 {
font-family: 'Source Sans Pro SemiBold';
font-size: 2.4rem;
color: #fff;
}
.actions {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
text-align: center;
}
.animation-action {
font-family: 'Source Sans Pro SemiBold';
text-transform: uppercase;
background: #3B90EE;
border: none;
color: #fff;
padding: 0.8rem 1.6rem;
text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
border-radius: 0.2rem;
line-height: 1;
transition: all 0.1s ease-in-out;
cursor: pointer;
margin: 0 0.8rem;
outline: none !important;
}
.animation-action:hover {
background: #2964A6;
}
.animation-action.animation-action-reset {
background: none;
border: 1px solid #303846;
}
.notification {
display: block;
float: left;
border-radius: 0.2rem;
overflow: hidden;
box-shadow: 0 3px 5px 0 rgba(0,0,0,0.33);
background: #192231;
width: 31.7rem;
position: absolute;
top: 1.6rem;
right: -31.7rem;
opacity: 0;
transition: all 0.4s ease-in-out;
max-width: 90%;
}
.notification.active {
opacity: 1;
right: 1.6rem;
}
.notification.pushed {
top: 19rem;
}
.notification.pushed-again {
top: 28.4rem;
}
.notification.off-screen {
right: -31.7rem;
opacity: 0;
}
.notification--top {
padding: 0.8rem 1.6rem;
background: #3B90EE;
}
.notification--top p {
font-size: 1.4rem;
font-weight: 400;
padding: 0;
margin: 0;
line-height: 1.6rem;
}
.notification.notification-alert .notification--top {
background: #FFC300;
color: #192231;
}
.notification--content {
padding: 1.6rem;
border-bottom: 1px solid #0C1626;
transition: all 0.4s ease-in-out;
}
.notification--content p {
margin: 0;
padding: 0;
font-size: 1.6rem;
font-weight: 400;
color: #BFC3C9;
line-height: 2.4rem;
transition: all 0.2s ease-in-out;
}
.notification.pushed .notification--content {
height: 0;
padding-top: 0;
padding-bottom: 0;
overflow: hidden;
}
.notification.pushed .notification--content p {
opacity: 0;
}
.notification--actions {
width: 100%;
margin: 0;
padding: 0;
position: relative;
font-family: 'Source Sans Pro SemiBold';
}
.notification--actions::before {
position: absolute;
height: 100%;
width: 0.1rem;
background: #0C1626;
display: block;
content: "";
top: 0%;
left: 50%;
transform: translateX(-50%);
}
.left, .right {
width: 50%;
margin: 0;
float: left;
text-align: center;
padding: 1.6rem 0;
display: block;
font-weight: 600;
text-transform: uppercase;
text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
cursor: pointer;
}
.left {
color: #3B90EE;
}
.right {
color: #5F6670;
}
</style>
</head>
<body>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="actions">
<h1>Notification Animation Demo</h1>
<button class="animation-action animation-action-start">Run Animation</button>
</div>
<div class="notification notification-normal">
<div class="notification--top">
<p>2HBY175, TX, Ford, 2016</p>
</div>
<div class="notification--content">
<p>Vehicle registration expiration date: 2018-01-22, registration jurisdiction cod…</p>
</div>
<div class="notification--actions clearfix">
<div class="left">View Record</div>
<div class="right">Dismiss</div>
</div>
</div>
<div class="notification notification-alert">
<div class="notification--top">
<p>Joseph Baker, TX, Male, 04-14-1982</p>
</div>
<div class="notification--content">
<p>Subject has warrant for arrest. Suspect is armed and considered dangerous.</p>
</div>
<div class="notification--actions clearfix">
<div class="left">View Record</div>
<div class="right">Dismiss</div>
</div>
</div>
<div class="notification notification-alert-2">
<div class="notification--top">
<p>Steve Austin, TX, Male, 04-14-1982</p>
</div>
<div class="notification--content">
<p>Subject has warrant for arrest. Suspect is armed and considered dangerous.</p>
</div>
<div class="notification--actions clearfix">
<div class="left">View Record</div>
<div class="right">Dismiss</div>
</div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
<script>
function runAnimation() {
$('.notification-normal').addClass('active');
$(this).prop('disabled', true);
setTimeout(function() {
$('.notification-normal').addClass('pushed');
}, 1000);
setTimeout(function() {
$('.notification-alert').addClass('active');
}, 1100);
setTimeout(function() {
$('.notification-alert').addClass('pushed');
$('.notification-normal').addClass('pushed-again');
}, 2000);
setTimeout(function() {
$('.notification-alert-2').addClass('active');
}, 2100);
setTimeout(function() {
$('.notification-normal').addClass('off-screen');
}, 3000);
setTimeout(function() {
$('.notification-alert').addClass('off-screen');
}, 4000);
setTimeout(function() {
$('.notification-alert-2').addClass('off-screen');
resetAnimation(this);
$(this).prop('disabled', false);
}, 5000);
}
function resetAnimation() {
$('.notification-normal').removeClass('active pushed pushed-again off-screen');
$('.notification-alert').removeClass('active pushed off-screen');
$('.notification-alert-2').removeClass('active pushed off-screen');
$('.animation-action').text("Run Again");
$('.animation-action').prop('disabled', false);
}
$('.animation-action-start').click(runAnimation);
</script>
</body>
</html>
