diff options
| -rw-r--r-- | public/js/2dtilt.js | 71 | ||||
| -rw-r--r-- | src/js/2dtilt.js | 89 |
2 files changed, 70 insertions, 90 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 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 |