c0.1.122 Proximity Hover effect

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;
+}
+
+// ------------------------------------------------------------------------

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>