style add image hover effect

beocaca · Feb 13, 2024 · 712b3bb · 712b3bb
1 parent 2514d8e
commit 712b3bb
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 80 deletions.
diff --git a/app.vue b/app.vue
@@ -12,8 +12,6 @@ onMounted(() => {
     isScroll.value = window.scrollY > window.innerHeight / 2
   })
 })
-
-// useColorMode().value = 'dark'
 </script>
 
 <template>

diff --git a/components/WelcomeCard.vue b/components/WelcomeCard.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { addHoverEffect } from '~/composables/hoverEffect'
+
 const link = [
   {
     index: 0,
@@ -38,61 +40,7 @@ function handleScroll() {
 }
 
 onMounted(() => {
-  // const favicon: HTMLElement | null = document.querySelector('.favicon-shadown')
-  // const yRotate = [-20, 20]
-  // const xRotate = [-20, 20]
-  // function getRotateDeg(range: number[], value: number, length: number) {
-  //   return (value / length) * (range[1] - range[0]) + range[0]
-  // }
-
-  // if (!favicon)
-  //   return
-  // favicon.onmousemove = (e: any) => {
-  //   const { offsetX, offsetY } = e
-  //   const { offsetWidth, offsetHeight } = favicon
-  //   const ry = -getRotateDeg(yRotate, offsetX, offsetWidth)
-  //   const rx = getRotateDeg(xRotate, offsetY, offsetHeight)
-  //   favicon.style.setProperty('--rx', `${rx}deg`)
-  //   favicon.style.setProperty('--ry', `${ry}deg`)
-  // }
-
-  // favicon.onmouseleave = () => {
-  //   favicon.style.setProperty('--rx', `0deg`)
-  //   favicon.style.setProperty('--ry', `0deg`)
-  // }
-  const card: HTMLElement | null = document.querySelector('.favicon-shadown')
-  const motionMatchMedia = window.matchMedia('(prefers-reduced-motion)')
-  const THRESHOLD = 10
-  /*
- * Read the blog post here:
- * https://letsbuildui.dev/articles/a-3d-hover-effect-using-css-transforms
- */
-  function handleHover(e: any) {
-    if (!card)
-      return
-    const { clientX, clientY, currentTarget } = e
-    const { clientWidth, clientHeight, offsetLeft, offsetTop } = currentTarget
-
-    const horizontal = (clientX - offsetLeft) / clientWidth
-    const vertical = (clientY - offsetTop) / clientHeight
-    const rotateX = (THRESHOLD / 2 - horizontal * THRESHOLD).toFixed(2)
-    const rotateY = (vertical * THRESHOLD - THRESHOLD / 2).toFixed(2)
-
-    card.style.transform = `perspective(${clientWidth}px) rotateX(${rotateY}deg) rotateY(${rotateX}deg) scale3d(1, 1, 1)`
-  }
-
-  function resetStyles(e: any) {
-    if (!card)
-      return
-    card.style.transform = `perspective(${e.currentTarget.clientWidth}px) rotateX(0deg) rotateY(0deg)`
-  }
-
-  if (!motionMatchMedia.matches) {
-    if (!card)
-      return
-    card.addEventListener('mousemove', handleHover)
-    card.addEventListener('mouseleave', resetStyles)
-  }
+  addHoverEffect('.favicon-shadow', 10)
 })
 </script>
 
@@ -129,7 +77,7 @@ onMounted(() => {
       </div>
     </div>
     <div class="hidden transition-all md:block">
-      <img src="https://static.vio.vin/favicon.png/comporess1600x900" alt="logo" class="favicon-shadown rounded-full shadow-md h-[300px] w-[300px] transition-all hover:shadow-xl">
+      <img src="https://static.vio.vin/favicon.png/comporess1600x900" alt="logo" class="favicon-shadow rounded-full shadow-md h-[300px] w-[300px] transition-all hover:shadow-xl">
     </div>
   </div>
   <div class="flex flex-row h-[100px] w-full justify-center">
@@ -143,27 +91,6 @@ onMounted(() => {
   src: url('/Spacewar.ttf') format('truetype');
 }
 
-.favicon-shadown:hover {
-  transform: translateZ(12px);
-  transition: all 0.1s ease;
-}
-
-.dark .favicon-shadown:hover {
-  transform: translateZ(12px);
-  transition: all 0.1s ease;
-}
-
-.favicon-shadown {
-  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
-  transition: all 0.1s ease;
-  transform-style: preserve-3d;
-}
-
-.dark .favicon-shadown {
-  transition: all 0.1s ease;
-  transform-style: preserve-3d;
-}
-
 @keyframes jump {
 
   0%,

diff --git a/composables/hoverEffect.ts b/composables/hoverEffect.ts
@@ -0,0 +1,32 @@
+export function addHoverEffect(select: string, offset: number) {
+  const card: HTMLElement | null = document.querySelector(select)
+  const motionMatchMedia = window.matchMedia('(prefers-reduced-motion)')
+  const THRESHOLD = offset
+
+  function handleHover(e: any) {
+    if (!card)
+      return
+    const { clientX, clientY, currentTarget } = e
+    const { clientWidth, clientHeight, offsetLeft, offsetTop } = currentTarget
+
+    const horizontal = (clientX - offsetLeft) / clientWidth
+    const vertical = (clientY - offsetTop) / clientHeight
+    const rotateX = (THRESHOLD / 2 - horizontal * THRESHOLD).toFixed(2)
+    const rotateY = (vertical * THRESHOLD - THRESHOLD / 2).toFixed(2)
+
+    card.style.transform = `perspective(${clientWidth}px) rotateX(${rotateY}deg) rotateY(${rotateX}deg) scale3d(1, 1, 1)`
+  }
+
+  function resetStyles(e: any) {
+    if (!card)
+      return
+    card.style.transform = `perspective(${e.currentTarget.clientWidth}px) rotateX(0deg) rotateY(0deg)`
+  }
+
+  if (!motionMatchMedia.matches) {
+    if (!card)
+      return
+    card.addEventListener('mousemove', handleHover)
+    card.addEventListener('mouseleave', resetStyles)
+  }
+}
diff --git a/pages/article/[shortLink].vue b/pages/article/[shortLink].vue
@@ -7,6 +7,7 @@ import { useTimeoutFn } from '@vueuse/core'
 import type { IArticle } from '~/server/types'
 import { useArticleStore } from '~/store/ArticleStore'
 import { formatTime } from '~/composables/formatTime'
+import { addHoverEffect } from '~/composables/hoverEffect'
 
 const route = useRoute()
 const article = ref<IArticle>()
@@ -65,6 +66,7 @@ onMounted(() => {
   })
 
   start()
+  addHoverEffect('.cover-image', 5)
 })
 
 onBeforeRouteLeave(() => {
@@ -111,7 +113,7 @@ watchEffect(() => {
             <Transition name="fade">
               <img
                 v-if="article?.cover" :src="`${article?.cover}/comporess1600x900`" alt="cover"
-                class="object-cover rounded-lg shadow-md w-full aspect-[16/9] z-10"
+                class="cover-image object-cover rounded-lg shadow-md w-full aspect-[16/9] z-10"
               >
             </Transition>
 

diff --git a/styles/main.css b/styles/main.css
@@ -488,4 +488,26 @@ html:not(.dark) [img-dark] {
 .reslide-leave-active {
   transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
   animation: up-to-down .5s ease reverse;
+}
+
+
+.favicon-shadow:hover {
+  transform: translateZ(12px);
+  transition: all 0.1s ease;
+}
+
+.dark .favicon-shadow:hover {
+  transform: translateZ(12px);
+  transition: all 0.1s ease;
+}
+
+.favicon-shadow {
+  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
+  transition: all 0.1s ease;
+  transform-style: preserve-3d;
+}
+
+.dark .favicon-shadow {
+  transition: all 0.1s ease;
+  transform-style: preserve-3d;
 }