-
Notifications
You must be signed in to change notification settings - Fork 5
/
script.js
84 lines (75 loc) · 2.25 KB
/
script.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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
/*
By Ofelquis
Twitter: @felquis
Blog : tutsmais.com.br
*/
!(function ($doc, $win) {
/*
Faz as imagens aparecerem com um fade maneiro ;)
*/
var $imgs = $doc.querySelectorAll('img'),
totalImg = $imgs.length - 1,
screenWidth = $win.screen.width / 2,
screenHeight = $win.screen.height / 2,
validPropertyPrefix = '',
otherProperty = 'perspective(600px)',
// Esta function retorna a posição top e left do elemento
returnPosition = function (obj) {
var currentTop = currentLeft = 0;
if (obj.offsetParent) {
do {
currentTop += obj.offsetTop;
currentLeft += obj.offsetLeft;
} while (obj = obj.offsetParent);
return [currentTop, currentLeft]
}
};
// Faz as imagens aparecerem com uma opacidade
for (var i = totalImg; i>=0; i--) {
$imgs[i].onload = function () {
this.style.opacity = 1;
}
}
// Verifica qual propriedade usar no browsers
if(typeof $imgs[0].style.webkitTransform == 'string') {
validPropertyPrefix = 'webkitTransform';
} else {
validPropertyPrefix = 'MozTransform';
}
// Adiciona o evento de mousemove ao documento
$doc.addEventListener('mousemove', function (e) {
// Calcula o meio de x, y da tela
var centroX = e.clientX - screenWidth,
centroY = screenHeight - (e.clientY + 13),
degX = centroX * 0.1,
degY = centroY * 0.1
// Percorre os elementos adicionando as transformações
for (var i = totalImg; i>=0; i--) {
var pos = returnPosition($imgs[i]);
centroX = e.clientX - pos[1],
centroY = pos[0] - (e.clientY + 13),
degX = centroX * 0.1,
degY = centroY * 0.1
$imgs[i].parentNode.style[validPropertyPrefix] = otherProperty + 'rotateY('+ degX +'deg) rotateX('+ degY +'deg)';
}
});
// Adiciona o click para deixar a foto grande e para retorna-la
$doc.addEventListener('click', function (i) {
//console.dir(i.target);
elem = i.target;
if (elem.tagName.toLowerCase() == 'img') {
if (elem.className.indexOf('lol') == -1) {
for (var i = totalImg; i>=0; i--) {
$imgs[i].className = 'brick';
$imgs[i].parentNode.style.zIndex = 5;
}
elem.className = 'brick lol';
elem.parentNode.style.zIndex = 10;
console.log(returnPosition(elem));
} else {
elem.className = 'brick';
elem.parentNode.style.zIndex = 5;
}
}
});
})(document, window);