<input id="yes" type="button" value="Yes, I am over 18">
<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() {
`(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