updates

2 files changed, 54 insertions, 1 deletions

diff --git a/src/js/2dtilt.js b/src/js/2dtilt.js
new file mode 100644
index 00000000..c37dd64d
--- /dev/null
+++ b/src/js/2dtilt.js
@@ -0,0 +1,53 @@
+//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
diff --git a/src/js/dynamicBlob.js b/src/js/dynamicBlob.js
index adad6ec3..e6573330 100644
--- a/src/js/dynamicBlob.js
+++ b/src/js/dynamicBlob.js
@@ -56,4 +56,4 @@ if (blobItem == "mouse") {
     loadScript('/js/randomblob.js')
 } else {
     throw new Error("Unknown blob type")
-}
\ No newline at end of file
+}