blob: ec7ab328f2c2d682878a391d7074b4acfb80007c (
plain)
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
|
"use strict";
if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i) || window.orientation > 1) {} else {
window.onload = function () {
var target = document.getElementsByClassName("tilt")[0];
var content = target.getElementsByClassName("content")[0];
var isMouseOver = false;
var centerX;
var centerY;
var mouseX;
var mouseY;
function resetStyle() {
target.style.transform = "";
target.style.height = "0px";
}
function sizeControl() {
var contentWidth = content.clientWidth;
var contentHeight = content.clientHeight;
target.style.width = "".concat(contentWidth, "px");
target.style.height = "".concat(contentHeight, "px");
window.requestAnimationFrame(sizeControl);
}
window.requestAnimationFrame(sizeControl);
function tiltEffect() {
var deltaScale = 50.0;
isMouseOver = true;
var rect = target.getBoundingClientRect();
centerX = rect.left + rect.width / 2;
centerY = rect.top + rect.height / 2;
target.style.transform = "translate(".concat((mouseX - centerX) / deltaScale, "px, ").concat((mouseY - centerY) / deltaScale, "px)");
requestAnimationFrame(tiltEffect);
}
target.addEventListener("mouseleave", function () {
isMouseOver = false;
target.style.transform = "";
});
document.addEventListener("mousemove", function (event) {
mouseX = event.clientX;
mouseY = event.clientY;
});
requestAnimationFrame(tiltEffect);
};
}
|
