Replica of iOS notification overlay

by Hugo Carneiro

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h3>Hello World</h3>
      <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor.</p>
      <p>Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus,
        porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nulla vitae elit libero, a pharetra augue.</p>
      <p class="text-center">
        <button type="button" class="btn btn-default" data-trigger-overlay>Bring overlay back</button>
      </p>
    </div>
  </div>
</div>
<div id="onboarding-overlay">
  <div class="overlay-body">
    <div class="time text-center">16:30</div>
    <p class="date text-center">Friday 27 October</p>
    <br>
    <h3>Earlier Today</h3>
    <div class="notification"></div>
  </div>
  <div id="overlay-handle">
    <div class="handle-icon"></div>
  </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700');
body {
  background-color: #00ABD1;
  color: #fff;
  font-family: 'Roboto', sans-serif;
}

#onboarding-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 15px;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-100%);
}

.overlay-body {}

#overlay-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#overlay-handle .handle-icon {
  width: 60px;
  height: 6px;
  border-radius: 25px;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background-color: rgba(0, 0, 0, 0.3);
}

.time {
  font-size: 95px;
  font-weight: 100;
  margin-top: 44px;
  line-height: 1;
}

.date {
  font-size: 22px;
  font-weight: 300;
}

.notification {
  height: 65px;
  border-radius: 15px;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.9);
}

JavaScript

var screenHeight = $(window).height();
var halfScreenHeight = screenHeight / 2;

var handle = document.getElementById("overlay-handle");
var $overlay = $("#onboarding-overlay");
var hammer = new Hammer(handle);

hammer.add(new Hammer.Pan({
  threshold: 0,
  pointers: 0
}));

hammer.on('panup pandown', function(event) {
  $.Velocity.hook($overlay, 'translateY', event.deltaY + 'px');
});

hammer.on('panend', function(event) {
  if (event.deltaY < -halfScreenHeight) {
    $overlay.velocity({
      translateY: [-screenHeight, event.deltaY]
    }, {
      duration: 250
    });
  } else {
    $overlay.velocity({
      translateY: [0, event.deltaY]
    }, {
      duration: 500
    });
  }
});

$('[data-trigger-overlay]').on('click', function() {
  $overlay.velocity({
    translateY: [0, -screenHeight]
  }, {
    duration: 250
  });
});

setTimeout(function() {
  $overlay.css('transform', 'translateY(-100%)');
  $overlay.velocity({
    translateY: [0, -screenHeight]
  }, {
    duration: 250
  });
}, 1000);