.n-wrapper#wrapper

button(disabled).simulate Loading...
View Compiled
* {
  box-sizing: border-box;
}

h1 {
  color: #fff;
}

html, body {
  height: 100%;
}

body {
  background: #222;
  display: flex;
}

.simulate {
  user-select: none;
  margin: auto;
  background: #f0f0f0;
  coor: #444;
  border: none;
  border-radius: 4em;
  padding: 1em 1.8em;
  outline: none;
  transition: all .4s ease;
  width: 10em;
  &:disabled {
    background: #999;
    width: 8em;
  }
}

.n-wrapper {
  position: fixed;
  right: 1em;
  top: 1em;
}

.n-box {
  position: relative;
  width: 18em;
  height: 4em;
  margin: .8em auto;
  padding: .5em 1.4em .5em .6em;
  

  border-radius: .3em;  
  box-shadow:
    0 .4em 1em -.2em rgba(0,0,0,.2);
  background: #f0f0f0;
}

.n-close {
  display: block;
  
  position: absolute;
  top: .4em;
  right: .4em;
  
  width: .9em;
  height: .9em;
  
  line-height: .8em;
  text-align: center;
  color: #777;
  
  border: 1px solid #777;
  border-radius: 50%;
  
  cursor: pointer;
}
.n-picture {
  height: 100%;
  display: block;
  border-radius: 50%;
  float: left;
}
.n-message {
  font-size: .8em;
  display: block;
  width: 78%;
  float: right;
  a {
    text-decoration: none;
    text-transform: capitalize;
    color: #2ECBAA;
  }
  color: #444;
  
}
View Compiled
var getRandomItem = function (list) {
  return Math.floor(Math.random()*list.length);
}

var actions = [
  'hearted your pen',
  'commented on your pen',
  'followed you',
  'mentioned you in'
];

var pens = [
  'a great pen!',
  'testing VelocityJs',
  'multiple css3 background',
  'best pen ever!!!11 yolo',
  'notifications!'
];

var Notification = function(data) {
  this.name = data.name.first + ' ' + data.name.last;
 
  this.message = this.randomMessage();
    
  this.picture = data.picture.thumbnail;
  this.elem;
  this.duration = 4000;
  
  this.create();
  
  this.animOptions = {
    duration: 400,
    easing: 'easeInOut'
  }
  
  this.show = function() {
    $(this.elem).velocity(
      {
        opacity: [1, 0],
        marginTop: [0, 20]
      }, this.animOptions
    );
    this.hide();
  }
  
  this.hide = function() {
    var opts = this.animOptions;
    opts['delay'] = this.duration;
    opts['display'] = 'none';
    $(this.elem).velocity(
      {
        opacity: [0, 1],
        marginTop: [-75, 0]
      }, opts
    );
  }
};

Notification.prototype.randomMessage = function() {
  var message = '',
      action = actions[getRandomItem(actions)];
  
  message += '<a href="#">'+this.name+'</a> ';
  message += action;
  if (!(actions.indexOf(action) == 2)) {
    message += ' <a href="#">' + pens[getRandomItem(pens)] + '</a>';
  }
  
  return message;
}

Notification.prototype.create = function() {
  var box =
      document.createElement('div');
    box.classList.add('n-box');

    var close =
      document.createElement('div');
    close.classList.add('n-close');
    close.innerHTML = '&times;';

    var picture =  document.createElement('img');
    picture.classList.add('n-picture');
    picture.src = this.picture;

    var body = 
      document.createElement('div');
    body.classList.add('n-body');

    var message = document.createElement('span');
    message.classList.add('n-message');
    
    message.innerHTML = this.message;

    box.appendChild(close);
    box.appendChild(picture);
    box.appendChild(message);


    var wrapper = document.getElementById('wrapper'); 
    wrapper.appendChild(box);

    this.elem = box;
}


$(function(){
  
  var users = {};
  
  // users from randomuser.me
  var request = $.getJSON('https://s3-us-west-2.amazonaws.com/s.cdpn.io/128337/users.json');
  

  $.when( request ).done(function() {
    var btn = document.querySelector('.simulate')
    btn.disabled = false
    btn.innerHTML = 'Notify!'
    console.log(request.responseJSON);
    users = request.responseJSON.results;
    
    var notifications = [];
    
    var pushNotif = function(){
      var user = users[Math.floor(Math.random()*users.length)].user;
      
      var n = new Notification(user);
      n.show();
      notifications.push(n);
    };
    
    btn.addEventListener('click', pushNotif, false);
    
    pushNotif();
  
  });
  

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //cdn.jsdelivr.net/velocity/1.1.0/velocity.min.js
  3. //cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js