diff options
| author | littleblack111 <littleblack11111@gmail.com> | 2024-03-10 23:00:23 +0800 |
|---|---|---|
| committer | littleblack111 <littleblack11111@gmail.com> | 2024-03-10 23:00:23 +0800 |
| commit | 6a6d94e9edbbf3e2cd3839a5ab1a1ce3e6d92754 (patch) | |
| tree | c26341f1515ca0ac60e96e7b0bc495833822226a /public/js/2dtilt.js | |
| parent | efb60bf443febb551f789ce911481eb65dff6549 (diff) | |
fixed formatting
Diffstat (limited to 'public/js/2dtilt.js')
| -rw-r--r-- | public/js/2dtilt.js | 71 |
1 files changed, 31 insertions, 40 deletions
diff --git a/public/js/2dtilt.js b/public/js/2dtilt.js index ec7ab328..19eb8a9c 100644 --- a/public/js/2dtilt.js +++ b/public/js/2dtilt.js @@ -1,43 +1,34 @@ "use strict"; +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 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); +} 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); - }; -}
\ No newline at end of file + target.addEventListener("mouseleave", function () { + isMouseOver = false; + target.style.transform = ""; + }); + document.addEventListener("mousemove", function (event) { + mouseX = event.clientX; + mouseY = event.clientY; + }); + requestAnimationFrame(tiltEffect); +} +;
\ No newline at end of file |
