From 1e5010580a300de77f2c7057f77bea9c1c0cf863 Mon Sep 17 00:00:00 2001
From: Ashrith Sagar Yedlapalli <ashrith9sagar@gmail.com>
Date: Sat, 17 Dec 2022 00:24:16 +0530
Subject: [PATCH] c0.1.122 Proximity Hover effect
---
static/script.js | 30 ++++++++++++++++++++++++++++++
wiki/pages/description.html | 9 +++++++--
2 files changed, 37 insertions(+), 2 deletions(-)
diff --git a/static/script.js b/static/script.js
index 4fa4558..532fc33 100644
--- a/static/script.js
+++ b/static/script.js
@@ -67,3 +67,33 @@ const hiddenElements = document.querySelectorAll('.reveal-on-scroll');
hiddenElements.forEach((element) => observer.observe(element));
// ------------------------------------------------------------------------
+// Proximity Hover effect
+// On Fish eyes in Description page
+
+const eyes = document.getElementById('fishEye')
+const anchor = document.getElementById('fishBody')
+const rekt = anchor.getBoundingClientRect();
+const anchorX = rekt.left + rekt.width / 2;
+const anchorY = rekt.top + rekt.height / 2;
+
+document.addEventListener('mousemove', (e) => {
+ const mouseX = e.clientX;
+ const mouseY = e.clientY;
+
+ const angleDeg = angle(mouseX, mouseY, anchorX, anchorY);
+
+ const eye = document.getElementById('fishEye')
+ eye.style.transform = `rotate(${90 + angleDeg}deg)`
+});
+
+function angle(cx, cy, ex, ey) {
+ const dy = ey - cy;
+ const dx = ex - cx;
+
+ const rad = Math.atan2(dy, dx); // range (-PI, PI]
+ const deg = rad * 180 / Math.PI; // rads to degs, range(-180, 180]
+
+ return deg;
+}
+
+// ------------------------------------------------------------------------
diff --git a/wiki/pages/description.html b/wiki/pages/description.html
index 0f933ec..072ff54 100644
--- a/wiki/pages/description.html
+++ b/wiki/pages/description.html
@@ -48,8 +48,13 @@
opacity of the muscles, and eventual death. Vibriosis affects all stages of growth causing upto 50% mortality [1].
</p>
-<img src="https://static.igem.wiki/teams/4200/wiki/description/fishwithvibriosis.png"
- alt="Image of fish having vibriosis" class="reveal-on-scroll" style="width: 40%">
+<div>
+ <img src="https://static.igem.wiki/teams/4200/wiki/description/fishwithvibriosis.png"
+ alt="Image of fish having vibriosis" style="width: 40%; position: relative;" id="fishBody">
+
+ <img src="https://static.igem.wiki/teams/4200/wiki/description/fishwithvibriosis-eye-no-bg.png"
+ alt="Image of fish having vibriosis" style="position: relative;top: -203px;left: -143px;width: 5%;" id="fishEye">
+</div>
<p class="reveal-on-scroll">Our bacteria of interest to tackle this infection in fish is <em>V.parahaemolyticus</em>. It
is a gram-negative halophile that is found in estuarine and marine environments [2]. <i>V. parahaemolyticus</i>
--
GitLab