Untitled

<input id="yes" type="button" value="Yes, I am over 18">

<input id="no" type="button" value="No, I am not over 18">

<div id="text"></div>

<script class="cssdeck" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

* {

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

}

html, body {

  width: 100%;

  height: 100%;

  overflow: none;

}

body {

  margin: 0;

  width: 100%;

  height: 100%;

}

input {

  -webkit-appearance: none;

  border-radius: 10px;

  border: 1px #ccc solid;

  background: #eee;

  padding: 20px 30px;

  width: 300px;

  height: 100px;

  text-align: center;

  font-size: 1.2em;

  &#yes {

    position: absolute;

    left: 200px;

    top: 200px;

    margin: 40px;

  } 

  &:hover {

    background-color: #f8f8f8;

    border-color: #eee;

    font-weight: bold;

  }

}

.bumper {

    position: absolute;

    top: 200px;

    left: 600px;

    margin-left: 0;

    padding: 40px;

    overflow: auto;

}

`(function() {

    var lastTime = 0;

    var vendors = ['ms', 'moz', 'webkit', 'o'];

    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {

        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];

        window.cancelAnimationFrame = 

          window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];

    }

    if (!window.requestAnimationFrame)

        window.requestAnimationFrame = function(callback, element) {

            var currTime = new Date().getTime();

            var timeToCall = Math.max(0, 16 - (currTime - lastTime));

            var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 

              timeToCall);

            lastTime = currTime + timeToCall;

            return id;

        };

    if (!window.cancelAnimationFrame)

        window.cancelAnimationFrame = function(id) {

            clearTimeout(id);

        };

}());

`

class Math.Vector

  constructor: (@x, @y) ->

  clone: () ->

    new Math.Vector(@x, @y)

  negate: () ->

    @x = -@x

    @y = -@y

    @

  neg: () ->

    @clone().negate()

  addeq: (v) ->

    @x += v.x

    @y += v.y

    @

  subeq: (v) ->

    @addeq(v.neg())

  add: (v) ->

    @clone().addeq(v)

  sub: (v) ->

    @clone().subeq(v)

  multeq: (c) ->

    @x *= c

    @y *= c

    @

  diveq: (c) ->

    @x /= c

    @y /= c

    @

  mult: (c) ->

    @clone().multeq(c)

  div: (c) ->

    @clone().diveq(c)

  dot: (v) ->

    @x * v.x + @y * v.y

  length: () ->

    Math.sqrt(@dot(@))

  normal: () ->

    @clone().diveq(@length())

evade = (event) ->

  self = $(@)

  corner = self.offset()

  center =

    x: corner.left + self.outerWidth() / 2

    y: corner.top + self.outerHeight() / 2

  dist = new Math.Vector center.x - event.pageX, center.y - event.pageY

  closest = self.outerWidth() / 2

  if dist.length() >= closest

    return

  delta = dist.normal().multeq(closest).sub(dist)

  newCorner =

    left: corner.left + delta.x

    top: corner.top + delta.y

  padding = parseInt(self.css('padding-left'))

  if newCorner.left < -padding

    newCorner.left = -padding

  else if newCorner.left + self.outerWidth() - padding > $(document).width()

    newCorner.left = $(document).width() - self.outerWidth() + padding

  if newCorner.top < -padding

    newCorner.top = -padding

  else if newCorner.top + self.outerHeight() - padding > $(document).height()

    newCorner.top = $(document).height() - self.outerHeight() + padding

  self.offset(newCorner)

($ '#no').wrap '<div class="bumper" />'

beginEvade = () ->

  $(@).bind('mousemove', evade)

endEvade = () ->

  $(@).unbind('mousemove', evade)

($ '.bumper').bind 'mouseover', beginEvade

($ '.bumper').bind 'mouseout', endEvade