JSFiddle - React, Tailwind, and code Playground

Fliplet In App Notifications - Ideas

by tonytlwu

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="notificationContainer">
  <p id="notificationTitle">Ridiculus Ipsum Ullamcorper</p>
  <p id="notificationBody">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

<div id="notificationContainer2">
  <p id="notificationTitle">Ridiculus Ipsum Ullamcorper</p>
  <p id="notificationBody">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

<div id="notificationContainer3" class="active">
  <p id="notificationTitle">Ridiculus Ipsum Ullamcorper</p>
  <p id="notificationBody">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  <div id="notificationLink">
    Open
  </div>
</div>

<div class="trigger-holder">
	<div class="btn btn-default optionOne">Option 1</div>
	<div class="btn btn-default optionTwo">Option 2</div>
	<div class="btn btn-default optionThree">Option 3</div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700');
html,
body {
  height: 100%;
}

body {
  font-family: 'Open Sans', sans-serif;
  color: #333;
  background: url('http://media.idownloadblog.com/wp-content/uploads/2018/01/Facebook-iOS-11-Wallpaper-3.jpeg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

#notificationContainer {
  position: fixed;
  top: -200px;
  left: 15px;
  right: 15px;
  padding: 15px 20px;
  background-color: #ffffff;
  -webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.35);
  box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.35);
	-webkit-transition: top 0.25s ease-out;
	transition: top 0.25s ease-out;
}

#notificationContainer2 {
  position: fixed;
  top: -200px;
  left: 0px;
  right: 0px;
  padding: 50px 20px 15px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.7);
  -webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.35);
  box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.35);
  overflow: hidden;
	-webkit-transition: top 0.25s ease-out;
	transition: top 0.25s ease-out;
}

#notificationContainer3 {
  position: fixed;
  top: -200px;
  left: 15px;
  right: 15px;
  padding: 15px;
  background-color: rgba(255, 255, 255, 1);
  -webkit-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.35);
  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.35);
  border-radius: 4px;
  overflow: hidden;
	-webkit-transition: top 0.25s ease-out;
	transition: top 0.25s ease-out;
}

#notificationContainer.active,
#notificationContainer3.active {
	top: 15px;
}

#notificationContainer2.active {
	top: 0px;
}

#notificationTitle {
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 14px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
 ...

JavaScript

function hideNotification(element) {
	setTimeout(function() {
		element.removeClass('active');
	}, 4000);
}

$('.optionOne').on('click', function() {
	$('#notificationContainer').addClass('active');
	hideNotification($('#notificationContainer'));
});

$('.optionTwo').on('click', function() {
	$('#notificationContainer2').addClass('active');
	hideNotification($('#notificationContainer2'));
});

$('.optionThree').on('click', function() {
	$('#notificationContainer3').addClass('active');
	hideNotification($('#notificationContainer3'));
});