Merge pull request #37 from INxST/feature/#36/link

Feature/#36/link

src/components/Footer/index.astro

@@ -42,7 +42,7 @@ const isHome = path === '/';
     <div class="hidden md:flex justify-end mt-[15.5rem]">
       <a
         href="#"
-        class="ts-anchor text-lg font-serif-en"
+        class="ts-text-link ts-anchor text-lg font-serif-en"
         data-stalker-color="bright">BACK TO TOP</a
       >
     </div>
@@ -58,7 +58,7 @@ const isHome = path === '/';
             <a
               href={link.href}
               target={link.target}
-              class="md:text-xl"
+              class="ts-text-link md:text-xl"
               data-stalker-color="bright"
             >
               {link.text}
@@ -83,7 +83,7 @@ const isHome = path === '/';
             <a
               href="mailto:[email protected]?subject=お問い合わせ"
               target="_blank"
-              class="text-8xl md:text-[15rem] leading-none text-taupe-gray font-serif-en"
+              class="ts-text-link text-8xl md:text-[15rem] leading-none text-taupe-gray font-serif-en"
               data-stalker-color="bright"
             >
               GET IN CONTACT

src/components/Header/Menu.astro

@@ -16,7 +16,7 @@ import MenuLink from '@/components/Header/MenuLink.astro';
         class="ts-menu-close text-pampas font-serif-en border border-emperor
         rounded-[30px] py-[6px] px-4 flex gap-2 items-center
         absolute top-5 md:top-10 right-5 md:right-20
-        group transition-colors hover:bg-pampas hover:text-mine-shaft"
+        group transition-colors duration-700 hover:bg-pampas hover:text-mine-shaft"
         data-stalker-color="bright"
       >
         <span class="inline-block">CLOSE</span>

src/components/Header/index.astro

@@ -54,7 +54,7 @@ const path = Astro.url.pathname;
     <button
       class="ts-menu-open font-serif-en border border-silver
       rounded-[30px] ml-auto md:ml-14 py-[6px] px-4 flex gap-2 items-center
-      group transition hover:bg-mine-shaft hover:text-pampas
+      group transition duration-700 hover:bg-mine-shaft hover:text-pampas
       text-black data-[color=dark]:text-pampas
       data-[color=dark]:hover:bg-pampas data-[color=dark]:hover:text-mine-shaft"
       data-color={color}

src/components/Stalker/index.tsx

@@ -19,10 +19,15 @@ const Stalker = () => {
       >
         <div className="w-full h-full relative rounded-full">
           <span
-            className="follower__text vertical-rl text-taupe-gray font-medium leading-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0 invisible transition-all"
+            className="follower__inside vertical-rl text-taupe-gray font-medium leading-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0 invisible transition-all"
             aria-hidden="true"
           >
-            <span>見る</span>
+            <span className="follower__text hidden" data-type="image">
+              閲覧
+            </span>
+            <span className="follower__text hidden" data-type="crossing">
+              次項
+            </span>
           </span>
           <span
             className="follower__drag absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0 invisible transition-all inline-flex gap-3 items-center p-5"

src/components/Stalker/stalker.ts

@@ -83,22 +83,33 @@ const stalker = ({ cursor, follower }: Args) => {
           followerSetY(pos.y);
         });
 
-        const links = document.querySelectorAll<HTMLLinkElement>('a');
+        const dragSelector = '.ts-drag-scroll';
+        const imageLinkSelector = '.ts-image-link';
+        const crossingLinkSelector = '.ts-crossing-link';
+        const links = document.querySelectorAll<HTMLLinkElement>(
+          `a:not(${dragSelector}, ${imageLinkSelector}, ${crossingLinkSelector})`
+        );
         const activeClass = ['is-active'];
+        const linkClass = ['is-active-link', ...activeClass];
+        const drags = document.querySelectorAll<HTMLElement>(dragSelector);
+        const dragClass = ['is-active-drag', ...activeClass];
+        const imageLinks =
+          document.querySelectorAll<HTMLLinkElement>(imageLinkSelector);
+        const imageClass = ['is-active-image', ...activeClass];
+        const crossingLinks =
+          document.querySelectorAll<HTMLLinkElement>(crossingLinkSelector);
+        const crossingClass = ['is-active-crossing', ...activeClass];
 
         links.forEach(link => {
           link.addEventListener('mouseenter', () => {
-            activeStalker(link, cursor.current, follower.current, activeClass);
+            activeStalker(link, cursor.current, follower.current, linkClass);
           });
 
           link.addEventListener('mouseleave', () => {
-            removeStalker(cursor.current, follower.current, activeClass);
+            removeStalker(cursor.current, follower.current, linkClass);
           });
         });
 
-        const drags = document.querySelectorAll<HTMLElement>('.ts-drag-scroll');
-        const dragClass = ['is-active-drag', 'is-active'];
-
         drags.forEach(drag => {
           drag.addEventListener('mouseenter', () => {
             activeStalker(drag, cursor.current, follower.current, dragClass);
@@ -108,6 +119,36 @@ const stalker = ({ cursor, follower }: Args) => {
             removeStalker(cursor.current, follower.current, dragClass);
           });
         });
+
+        imageLinks.forEach(imageLink => {
+          imageLink.addEventListener('mouseenter', () => {
+            activeStalker(
+              imageLink,
+              cursor.current,
+              follower.current,
+              imageClass
+            );
+          });
+
+          imageLink.addEventListener('mouseleave', () => {
+            removeStalker(cursor.current, follower.current, imageClass);
+          });
+        });
+
+        crossingLinks.forEach(crossingLink => {
+          crossingLink.addEventListener('mouseenter', () => {
+            activeStalker(
+              crossingLink,
+              cursor.current,
+              follower.current,
+              crossingClass
+            );
+          });
+
+          crossingLink.addEventListener('mouseleave', () => {
+            removeStalker(cursor.current, follower.current, crossingClass);
+          });
+        });
       } else {
         cursor.current?.remove();
         follower.current?.remove();

src/components/WorksGallery/Item.astro

@@ -12,7 +12,7 @@ const { item, number } = Astro.props;
 >
   <a
     href={item.href}
-    class="group flex flex-col md:flex-row gap-4 md:gap-16 md:pl-[10%] border-t md:border-none border-silver"
+    class="ts-image-link group flex flex-col md:flex-row gap-4 md:gap-16 md:pl-[10%] border-t md:border-none border-silver"
   >
     <div class="flex md:hidden justify-between pt-3">
       <span>{number}</span>

src/components/WorksSlide/index.tsx

@@ -53,7 +53,10 @@ const WorksSlide = ({ title, titleEn, items }: Props) => {
                     : null
                 }
               >
-                <a href={item.href} className="flex flex-col h-full">
+                <a
+                  href={item.href}
+                  className="ts-image-link flex flex-col h-full"
+                >
                   <div className="flex flex-1">
                     <picture className="flex-1">
                       <img
@@ -92,7 +95,7 @@ const WorksSlide = ({ title, titleEn, items }: Props) => {
           <li className="ts-scroll-slide-item pr-10 flex items-center">
             <a
               href="/about"
-              className="ts-text-link text-2xl md:text-[2rem] vertical-rl font-semibold ml-24 md:ml-72 border-r pr-2"
+              className="ts-text-link ts-crossing-link text-2xl md:text-[2rem] vertical-rl font-semibold ml-24 md:ml-72 border-r pr-2"
               data-vertical="rl"
             >
               <span>私について</span>

src/layouts/Layout.astro

@@ -7,7 +7,6 @@ import { SEO } from 'astro-seo';
 import siteInfo from '@/data/siteInfo';
 import Header from '@/components/Header/index.astro';
 import Main from '@/components/Main.astro';
-import Stalker from '@/components/Stalker';
 import Footer from '@/components/Footer/index.astro';
 import cn from '@/libs/cn';
 import '@/styles/global.scss';
@@ -93,7 +92,7 @@ const bodyClass = cn({
         </>
       )
     }
-    <Stalker client:only="react" />
+
     <script>
       import smoothScroll from '@/libs/smoothScroll';
       import hoverTextLink from '@/libs/hoverTextLink';

src/layouts/LayoutTop.astro

@@ -8,7 +8,6 @@ import siteInfo from '@/data/siteInfo';
 import Header from '@/components/Header/index.astro';
 import Footer from '@/components/Footer/index.astro';
 import Main from '@/components/Main.astro';
-import Stalker from '@/components/Stalker';
 import '@/styles/global.scss';
 interface Props {
   title?: string;
@@ -85,7 +84,6 @@ const meta = {
       <slot />
     </Main>
     <Footer />
-    <Stalker client:only="react" />
 
     <style lang="scss">
       .bg {

src/libs/hoverTextLink.ts

@@ -1,6 +1,6 @@
 const hoverTextLink = () => {
   const links = document.querySelectorAll<HTMLElement>('.ts-text-link');
-  const delay = 10;
+  const delay = 50;
   links.forEach(link => {
     // 一文字ずつ分割して複製し、spanタグで囲む
     const text = link.textContent;

src/pages/about.astro

@@ -7,6 +7,7 @@ import snsLinks from '@/data/snsLinks';
 import AboutSection from '@/components/AboutSection.astro';
 import Timeline from '@/components/Timeline/index.astro';
 import timelines from '@/data/timelines';
+import Stalker from '@/components/Stalker';
 const title = '私について';
 const titleEn = 'ABOUT';
 ---
@@ -86,6 +87,8 @@ const titleEn = 'ABOUT';
   <AboutSection title="CAREER">
     <Timeline items={timelines} />
   </AboutSection>
+
+  <Stalker client:only="react" />
 </Layout>
 
 <script>

src/pages/index.astro

@@ -3,6 +3,7 @@ import LayoutTop from '@/layouts/LayoutTop.astro';
 import Hero from '@/components/Hero/index.astro';
 import ParallaxGallery from '@/components/ParallaxGallery/index.astro';
 import WorksGallery from '@/components/WorksGallery/index.astro';
+import Stalker from '@/components/Stalker';
 ---
 
 <LayoutTop>
@@ -11,4 +12,6 @@ import WorksGallery from '@/components/WorksGallery/index.astro';
   <ParallaxGallery />
 
   <WorksGallery />
+
+  <Stalker client:only="react" />
 </LayoutTop>

src/pages/works.astro

@@ -2,12 +2,19 @@
 import Layout from '@/layouts/Layout.astro';
 import WorksSlide from '@/components/WorksSlide';
 import works from '@/data/works';
+import Stalker from '@/components/Stalker';
 const title = '制作実績';
 const titleEn = 'WORKS';
 ---
 
 <Layout title={titleEn}>
-  <WorksSlide title={title} titleEn={titleEn} items={works} client:only />
+  <WorksSlide
+    title={title}
+    titleEn={titleEn}
+    items={works}
+    client:only="react"
+  />
+  <Stalker client:only="react" />
 </Layout>
 
 <style>

src/pages/works/detail.astro

@@ -4,6 +4,7 @@ import DetailSection from '@/components/DetailSection.astro';
 import DescriptionList from '@/components/DescriptionList.astro';
 import DetailImage from '@/components/DetailImage.astro';
 import Scroll from '@/components/Scroll.astro';
+import Stalker from '@/components/Stalker';
 const title = '医療従事者サイト';
 ---
 
@@ -169,7 +170,7 @@ const title = '医療従事者サイト';
         <a
           href="/"
           aria-label="タイトル名タイトル名タイトル名タイトル名タイトル名を見る"
-          class="block h-full relative"
+          class="ts-crossing-link block h-full relative"
         >
           <img
             src="https://placehold.jp/895x1080.png"
@@ -196,6 +197,8 @@ const title = '医療従事者サイト';
       </picture>
     </div>
   </section>
+
+  <Stalker client:only="react" />
 </Layout>
 
 <script>

src/styles/global.scss

@@ -54,17 +54,44 @@ html.lenis body {
 .follower {
   &.is-active {
     mix-blend-mode: normal;
-    width: 5rem;
-    height: 5rem;
 
-    &:not(.is-active-drag) {
-      .follower__text {
+    &-link {
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+
+    &-drag,
+    &-image,
+    &-crossing {
+      width: 5rem;
+      height: 5rem;
+    }
+
+    &-image,
+    &-crossing {
+      .follower__inside {
         opacity: 1;
         visibility: visible;
       }
     }
 
-    &.is-active-drag {
+    &-image {
+      .follower__text {
+        &[data-type='image'] {
+          display: block;
+        }
+      }
+    }
+
+    &-crossing {
+      .follower__text {
+        &[data-type='crossing'] {
+          display: block;
+        }
+      }
+    }
+
+    &-drag {
       .follower__drag {
         opacity: 1;
         visibility: visible;
@@ -75,7 +102,7 @@ html.lenis body {
   &[data-stalker-color='bright'] {
     background-color: #dededa;
 
-    .follower__text {
+    .follower__inside {
       color: #3d3d3d;
     }
   }