Ajax Loader
×
HTML
<input id="yes" type="button" value="Yes, I am over 18">
1
<input id="yes" type="button" value="Yes, I am over 18">
2
<input id="no" type="button" value="No, I am not over 18">
3
 
4
<div id="text"></div>
5
 
6
<script class="cssdeck" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
7
 
 
CSS
* {
1
* {
2
  -moz-box-sizing: border-box;
3
  -webkit-box-sizing: border-box;
4
  box-sizing: border-box;
5
}
6
 
7
html, body {
8
  width: 100%;
9
  height: 100%;
10
  overflow: none;
11
}
12
 
13
body {
14
  margin: 0;
15
  width: 100%;
16
  height: 100%;
17
}
18
 
19
input {
20
  -webkit-appearance: none;
21
  border-radius: 10px;
22
  border: 1px #ccc solid;
23
  background: #eee;
24
  padding: 20px 30px;
25
  width: 300px;
26
  height: 100px;
27
  text-align: center;
28
  font-size: 1.2em;
29
  
30
  &#yes {
31
    position: absolute;
32
    left: 200px;
33
    top: 200px;
34
    margin: 40px;
35
  } 
36
  
37
  &:hover {
38
    background-color: #f8f8f8;
39
    border-color: #eee;
40
    font-weight: bold;
41
  }
42
}
43
 
44
.bumper {
45
    position: absolute;
46
    top: 200px;
47
    left: 600px;
48
    margin-left: 0;
49
    padding: 40px;
50
    overflow: auto;
51
}
 
JavaScript
`(function() {
1
`(function() {
2
    var lastTime = 0;
3
    var vendors = ['ms', 'moz', 'webkit', 'o'];
4
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
5
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
6
        window.cancelAnimationFrame = 
7
          window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
8
    }
9
 
10
    if (!window.requestAnimationFrame)
11
        window.requestAnimationFrame = function(callback, element) {
12
            var currTime = new Date().getTime();
13
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
14
            var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
15
              timeToCall);
16
            lastTime = currTime + timeToCall;
17
            return id;
18
        };
19
 
20
    if (!window.cancelAnimationFrame)
21
        window.cancelAnimationFrame = function(id) {
22
            clearTimeout(id);
23
        };
24
}());
25
`
26
 
27
class Math.Vector
28
  constructor: (@x, @y) ->
29
 
30
  clone: () ->
31
    new Math.Vector(@x, @y)
32
 
33
  negate: () ->
34
    @x = -@x
35
    @y = -@y
36
    @
37
 
38
  neg: () ->
39
    @clone().negate()
40
 
41
  addeq: (v) ->
42
    @x += v.x
43
    @y += v.y
44
    @
45
 
46
  subeq: (v) ->
47
    @addeq(v.neg())
48
 
49
  add: (v) ->
50
    @clone().addeq(v)
51
 
52
  sub: (v) ->
53
    @clone().subeq(v)
54
 
55
  multeq: (c) ->
56
    @x *= c
57
    @y *= c
58
    @
59
 
60
  diveq: (c) ->
61
    @x /= c
62
    @y /= c
63
    @
64
 
65
  mult: (c) ->
66
    @clone().multeq(c)
67
 
68
  div: (c) ->
69
    @clone().diveq(c)
70
 
71
  dot: (v) ->
72
    @x * v.x + @y * v.y
73
 
74
  length: () ->
75
    Math.sqrt(@dot(@))
76
 
77
  normal: () ->
78
    @clone().diveq(@length())
79
 
80
evade = (event) ->
81
  self = $(@)
82
  corner = self.offset()
83
  center =
84
    x: corner.left + self.outerWidth() / 2
85
    y: corner.top + self.outerHeight() / 2
86
  dist = new Math.Vector center.x - event.pageX, center.y - event.pageY
87
  closest = self.outerWidth() / 2
88
  
89
  if dist.length() >= closest
90
    return
91
 
92
  delta = dist.normal().multeq(closest).sub(dist)
93
  newCorner =
94
    left: corner.left + delta.x
95
    top: corner.top + delta.y
96
    
97
  padding = parseInt(self.css('padding-left'))
98
  if newCorner.left < -padding
99
    newCorner.left = -padding
100
  else if newCorner.left + self.outerWidth() - padding > $(document).width()
101
    newCorner.left = $(document).width() - self.outerWidth() + padding
102
 
103
  if newCorner.top < -padding
104
    newCorner.top = -padding
105
  else if newCorner.top + self.outerHeight() - padding > $(document).height()
106
    newCorner.top = $(document).height() - self.outerHeight() + padding
107
 
108
  self.offset(newCorner)
109
 
110
($ '#no').wrap '<div class="bumper" />'
111
 
112
beginEvade = () ->
113
  $(@).bind('mousemove', evade)
114
  
115
endEvade = () ->
116
  $(@).unbind('mousemove', evade)
117
  
118
($ '.bumper').bind 'mouseover', beginEvade
119
($ '.bumper').bind 'mouseout', endEvade
 

Untitled

CSSDeck G+