Merge pull request #41 from INxST/feature/#26/fix-works

Feature/#26/fix works
INxST · Jul 21, 2024 · 6f92bea · 6f92bea
2 parents 288417e + 99e2128
commit 6f92bea
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 6 deletions.
diff --git a/src/components/TitleVertical.tsx b/src/components/TitleVertical.tsx
@@ -9,7 +9,7 @@ const TitleVertical = ({ jp, en }: Props) => {
       <span className="text-4xl md:text-5xl font-semibold leading-none vertical-rl align-top -mt-5">
         <span>{jp}</span>
       </span>
-      <span className="md:text-xl font-serif-en md:leading-none vertical-rl align-top">
+      <span className="-mt-5 ml-2 md:ml-4 md:text-xl font-serif-en md:leading-none vertical-rl align-top">
         ({en})
       </span>
     </h1>

diff --git a/src/components/WorksSlide/index.tsx b/src/components/WorksSlide/index.tsx
@@ -33,7 +33,7 @@ const WorksSlide = ({ title, titleEn, items }: Props) => {
           ref={container}
           className="flex flex-nowrap justify-start whitespace-nowrap h-[calc(100vh-calc(var(--header-height)+3.25rem))] md:h-[calc(100dvh-calc(var(--header-height)+var(--filter-height)))] pt-11 pb-20 box"
         >
-          <li className="ts-scroll-slide-item">
+          <li className="ts-scroll-slide-item mr-20 md:mr-60">
             <TitleVertical jp={title} en={titleEn} />
           </li>
           {items.map((item, i) => {
@@ -43,7 +43,7 @@ const WorksSlide = ({ title, titleEn, items }: Props) => {
                 className="ts-scroll-slide-item h-full aspect-works-slide 
                 pt-5 pb-6 border-l peer-last:border-r last-of-type:border-r border-silver 
                 bg-gray-texture px-12 whitespace-nowrap max-w-full
-                transition-all duration-700 animate-text-focus-in
+                transition-all duration-[1500ms] animate-text-focus-in
                 data-[hidden]:animate-text-blur-out data-[hidden]:max-w-0 data-[hidden]:px-0"
                 data-tags={item.tags.join(' ')}
                 data-hidden={

diff --git a/src/components/WorksSlide/scrollSlide.ts b/src/components/WorksSlide/scrollSlide.ts
@@ -20,11 +20,18 @@ const scrollSlide = ({ wrapper, container, progress, filter }: Args) => {
       didEffect.current = true;
 
       const slides = gsap.utils.toArray<HTMLElement>('.ts-scroll-slide-item');
-      const width = container.current?.clientWidth;
-      const magnification = document.body.clientWidth > 768 ? -30 : -110;
+      // slideの最後から3つの幅を引いた値を取得
+      const width =
+        container.current?.clientWidth! -
+        (document.body.clientWidth > 768
+          ? slides[0].clientWidth +
+            slides[slides.length - 3].clientWidth +
+            slides[slides.length - 2].clientWidth +
+            slides[slides.length - 1].clientWidth
+          : 0);
 
       gsap.to(container.current, {
-        xPercent: magnification * (slides.length - 1),
+        xPercent: -100 * (slides.length - 1),
         ease: 'none',
         scrollTrigger: {
           trigger: wrapper.current,