jazz

Author: vivCoding

pages/_includes/index/projects.liquid

@@ -25,7 +25,7 @@
     {% for project in projects %}
       {% assign delay = delay | plus: 50 %}
       <a
-        class="projectCard group flex w-full select-text flex-col items-center rounded-2xl bg-white text-black opacity-0 transition hover:scale-105 motion-reduce:opacity-100 motion-reduce:hover:scale-100 sm:flex-row animation-delay-[{{ delay }}ms] hover:bg-slate-200"
+        class="projectCard group flex w-full select-text flex-col items-center rounded-2xl bg-white text-black opacity-0 transition hover:z-50 hover:scale-105 motion-reduce:opacity-100 motion-reduce:hover:scale-100 sm:flex-row animation-delay-[{{ delay }}ms] hover:bg-slate-200 "
         draggable="false"
         href="{{ project.link }}"
         title="{{ project.title }}"

scripts/section-transitions/contact.ts

@@ -31,6 +31,7 @@ export function initTransition() {
 
   // accouting for large screens, where there is very minimal scrolling
   useScrollPosition(({ yPercentage }) => {
+    console.log(yPercentage)
     if (yPercentage === 1) show()
   })
 }

scripts/utils/hooks.ts

@@ -37,7 +37,7 @@ export function usePercentageSeen(element: HTMLElement | null, onChange: (percen
     const calcPercentage =
       (overTopEdge ? elementOffsetTop + elementHeight - topEdge : bottomEdge - elementOffsetTop) / elementHeight
     // Restrict the range to between 0 and 1
-    const percentage = clampValue(0, 1, calcPercentage)
+    const percentage = Math.round(clampValue(0, 1, calcPercentage) * 100) / 100
     onChange(percentage)
   })
 
@@ -67,7 +67,7 @@ export function useYPercentageOnScreen(
     const trigger = elementPos - viewportHeight
     // now calculate the element's position y on screen, and get percentage y
     // also restrict range to between 0 and 1
-    const percentage = clampValue(0, 1, (scrollPos - trigger) / viewportHeight)
+    const percentage = Math.round(clampValue(0, 1, (scrollPos - trigger) / viewportHeight) * 100) / 100
     onChange(percentage)
   })
 
@@ -80,8 +80,11 @@ export function useScrollPosition(onChange: ({ yPos, yPercentage }: { yPos: numb
   scrollHooks.push(() => {
     const yPos = window.scrollY
     const yPercentage =
-      document.documentElement.scrollTop /
-      (document.documentElement.scrollHeight - document.documentElement.clientHeight)
+      Math.round(
+        (document.documentElement.scrollTop /
+          (document.documentElement.scrollHeight - document.documentElement.clientHeight)) *
+          100
+      ) / 100
     onChange({ yPos, yPercentage })
   })