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 /src/js | |
| parent | efb60bf443febb551f789ce911481eb65dff6549 (diff) | |
fixed formatting
Diffstat (limited to 'src/js')
| -rw-r--r-- | src/js/2dtilt.js | 89 |
1 files changed, 39 insertions, 50 deletions
diff --git a/src/js/2dtilt.js b/src/js/2dtilt.js index c37dd64d..27d69344 100644 --- a/src/js/2dtilt.js +++ b/src/js/2dtilt.js @@ -1,53 +1,42 @@ +let target = document.getElementsByClassName("tilt")[0]; +let content = target.getElementsByClassName("content")[0]; +let isMouseOver = false; +let centerX; +let centerY; +let mouseX; +let mouseY; + +function resetStyle() { + target.style.transform = ""; + target.style.height = "0px"; +} + +// tile effect + +function tiltEffect() { + const 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(${ ( mouseX - centerX ) / deltaScale }px, ${ ( mouseY - centerY ) / deltaScale }px)`; + requestAnimationFrame(tiltEffect); +} + //check if mobile 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() { - - let target = document.getElementsByClassName("tilt")[0]; - let content = target.getElementsByClassName("content")[0]; - let isMouseOver = false; - let centerX; - let centerY; - let mouseX; - let mouseY; - - function resetStyle() { - target.style.transform = ""; - target.style.height = "0px"; - } - - function sizeControl() { - var contentWidth = content.clientWidth; - var contentHeight = content.clientHeight; - target.style.width = `${contentWidth}px`; - target.style.height = `${contentHeight}px`; - window.requestAnimationFrame(sizeControl); - } - window.requestAnimationFrame(sizeControl); - - // tile effect - - function tiltEffect() { - const 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(${ ( mouseX - centerX ) / deltaScale }px, ${ ( mouseY - centerY ) / deltaScale }px)`; - requestAnimationFrame(tiltEffect); - } - - target.addEventListener("mouseleave", () => { - 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", () => { + isMouseOver = false; + target.style.transform = ""; + }); + + document.addEventListener("mousemove", function(event) { + mouseX = event.clientX; + mouseY = event.clientY; + }); + + requestAnimationFrame(tiltEffect); + +};
\ No newline at end of file |
