A CodePen by Tim Pietrusky. Instant Excuse - You need an excuse? Inspired by the "Instant Excuse Ball" http://www.accoutrements.com/shop/products/Instant-Excuse-Ball.html Bubbles taken from Hugo Giraudel's "Light chat icon" http://codepen.io/HugoGiraudel/pen/xmElI

index.html

<!--
	Instant Excuse

  Click to create an instant excuse for almost anything!

  
  Inspired by "Instant Excuse Ball" by Accoutrements
  http://www.accoutrements.com/shop/products/Instant-Excuse-Ball.html

  Bubbles taken from "Light chat icon" by Hugo Giraudel
  http://codepen.io/HugoGiraudel/pen/xmElI


  2012 by Tim Pietrusky
  timpietrusky.com
-->

<div role="excuse">
  <h1>Instant Excuse</h1>
  <div role="message">click to go</div>
</div>

script.js

var messages = [
  'The dog ate everything', 
  'I have Spring Fever',
  'This head ache is killing me',
  'I\'m still drunk from last night',
  'My car caught on fire',
  'I\'m pregnant',
  'The city is paving my street',
  'My fish died',
  'The sun is shining',
  'It\'s dark',
  'I\'ve spent my last cent playing online poker and I don\'t have any money left for the bus',
  'Mexican Food',
  'World War 3',
  'The president just called',
  'My home is flooded',
  'Jury duty',
  'I tried to dye my hair blonde, but it came out green',
  'Someone smashed in my windows this morning',
  'I locked myself in the bathroom',
  'I ate bad sushi last night',
  'I can\'t find my clothes',
  'Twitter is down',
  'It was like that when I got here',
  'I was kidnapped by aliens',
  'The voices told me to clean all the guns today',
  'My plane was cancelled',
  'My car ran out of gas',
  'My dog ran away',
  'A meteorite crashed into my house',
  'Zombies attacked me',
  'I need to defuse the bomb',
  'The sequel of <my favorite game> came out yesterday',
  'I was bitten by a vampire',
  'I helped E.T. phoning home',
  'Darth Vader is my father',
  'The web crashed and I had to fix it',
  'Chris Coyier asked me to help him with something very important',
  'I\'m just a nerd',
  '!important',
  'Aliens destroyed my home planet',
  'The series finale of <my favorite show> aired yesterday night',
  'It\'s full moon',
  'Chuck Norris doesn\'t need an excuse',
  'I\'m just stupid as hell',
  'The system got hacked',
  'I\'m a vampire',
  'I helped Marty McFly to get back to the future',
  'The deadline was 5 hours ago',
  'Microsoft bought Google',
  'Internet Explorer 6',
  'This is not supported with your configuration'
];

var _container = $('div[role="excuse"]'),
    _el = $('div[role="message"]'),
    _last_random = 0,
    _counter = 1,
    _color;

_el.click(function() {
  _last_random = randomBetween(messages.length);
  
  _el.addClass('off');
  _container.addClass('off-' + _counter);
      
  _color = 360 / messages.length * _last_random;
  $('body').css('background', 'hsla('+_color+',100%,50%,0.2)');
  
  setTimeout(function() {
    _el.html(messages[_last_random]);
    _el.removeClass('off');
    _container.removeClass('off-' + _counter);
    
    _counter++;
    
    if (_counter == 3) {
      _counter = 1;
    }
    

    
  }, 400);
});

/**
 * Return a random value not greater than max.
 */
function randomBetween(max) {
  var r;
  do {r = Math.random();} while(r == 1.0);
  
  r = parseInt(r * max);
  
  if (r == _last_random) {
    return randomBetween(max);
  } else {
    return r;
  }
}

style.css

@import url(http://fonts.googleapis.com/css?family=Fredericka+the+Great);

* { 
  box-sizing: border-box;
  transition: all .3s ease-in-out;
  transform-origin:50% 35%;
}

html { 
  height: 100%; 
}

body {
  color:#000;
  overflow:hidden;
  background: #ccc;
}

h1 {
  position:absolute;
  right:20px;
  top:-85px;
  margin:0;
  
  font:60px 'Fredericka the Great', sans-serif;
  text-shadow: 
    0 0 20px rgba(30, 30, 30, .4),
    0 0 5px rgba(30, 30, 30, .6),
    0 0 3px rgba(60, 60, 60, .3)
  ;
}

div[role="excuse"],
div[role="excuse"]:before,
div[role="excuse"]:after {
  left:50%;
  top:90px;
 	position:absolute; 
  width:600px;
  height:320px;
  margin-left:-300px;
  border-radius:50%;
  background:#ECECEC;
  box-shadow:
    inset 0 5px 0 rgba(255,255,255,0.3),
    inset 0 -5px 0 rgba(180,180,180,0.1),
    0 0 10px rgba(0,0,0,0.1),
    0 3px 3px rgba(0,0,0,0.2);
  border:1px solid rgba(0,0,0,0.1);
  
  transition: all .4s ease-in-out;
}

div[role="excuse"]:before {
  width:60px;
  height:40px;
  left:auto;
  right:-60px;
  top:20px;
  margin:0;
 	content:"";
  border-radius:50%;
}

div[role="excuse"]:after {
  width:30px;
  height:20px;
  left:auto;
  right:0px;
  top:-10px;
  margin:0;
 	content:"";
  border-radius:50%;
}

div[role="excuse"] div[role="message"] {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:320px;
  padding:65px 60px 20px 60px;
  text-align:center;
  font:bold 40px/45px "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
  letter-spacing:1px;
  color:#222;
}

div[role="excuse"] div[role="message"]:before,
div[role="excuse"] div[role="message"]:after {
  content:'\00BB';
  opacity:.5;
  font-size:70px;
  line-height:20px;
  margin-right:5px;
  color:rgba(60, 60, 60, .1);
  text-shadow:0 0 5px rgba(0, 0, 0, .1);
}

div[role="excuse"] div[role="message"]:after {
  content:'\00AB';
  margin-left:5px;
}


div[role="excuse"] div[role="message"].off {
  transform:scale(4);
  opacity:0;
   -webkit-filter: blur(5px);
   filter: blur(5px);
}

div[role="excuse"].off-1 {
  transform:scale(.4) skewY(25deg) rotate(15deg);
}

div[role="excuse"].off-2 {
  transform:scale(.4) skewY(-25deg) rotate(-15deg);
}