-
Notifications
You must be signed in to change notification settings - Fork 5
/
cssHolo.js
48 lines (41 loc) · 1.27 KB
/
cssHolo.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
(function( $ ){
$.fn.cssHolo = function( options ) {
var mouseX, mouseY, moveX, moveY;
var base = this;
var settings = {
'skew': 10,
'centerX': $(document.body).width()/2,
'centerY': $(document.body).height()/2,
'invert': true,
'container': document
}
if (options) {
$.extend(settings, options);
}
var holoObjects = [];
var loop = 0;
base.each( function() {
var zIndex = (!$(this).css('z-index') || $(this).css('z-index') == 'auto') ? 10 : $(this).css('z-index');
//if no z-index assigned, it gets a default of 10
holoObjects[loop++] = {
'initX': parseInt( $(this).css('left') ),
'initY': parseInt( $(this).css('top') ),
'level': zIndex/10
}
});
$(settings.container).mousemove(function(e){
mouseX = e.pageX;
mouseY = e.pageY;
moveX = (mouseX - parseInt(settings.centerX)) * settings.skew/300;
moveY = (mouseY - parseInt(settings.centerY)) * settings.skew/300;
if (settings.invert == false) { moveX *= -1; moveY *= -1; }
var num = 0;
return base.each( function() {
var thisMoveX = moveX * holoObjects[num].level;
var thisMoveY = moveY * holoObjects[num].level;
$(this).css( { 'left': holoObjects[num].initX - thisMoveX, 'top': holoObjects[num].initY - thisMoveY } );
num++;
});
});
};
})( jQuery );