add hold and drag

TrustlessComputer · Jan 22, 2024 · bd10ae5 · bd10ae5
1 parent 0674033
commit bd10ae5
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 38 deletions.
diff --git a/public/icons/fame-arrows.svg b/public/icons/fame-arrows.svg
diff --git a/src/modules/landing/Componets/Intro/index.tsx b/src/modules/landing/Componets/Intro/index.tsx
@@ -4,6 +4,7 @@ import { gsap } from 'gsap';
 import useAnimationStore from '@/stores/useAnimationStore';
 import { MathMap } from '@/utils/mathUtils';
 import { DotLottiePlayer } from '@dotlottie/react-player';
+import Image from 'next/image';
 
 const FRAMES = 169;
 
@@ -201,36 +202,14 @@ export default function Intro() {
 
           <div className={s.intro_inner_bottom}>
             <p className={s.intro_inner_bottom_cotnent}>
-              Step inside
+              Hold & Drag to go inside
             </p>
             <div className={s.drag} onMouseMove={onMouse} onTouchMove={onMouse}>
               <div ref={gradientRef} className={s.drag_line}>
-                <svg
-                  xmlns='http://www.w3.org/2000/svg'
-                  width='130'
-                  height='2'
-                  viewBox='0 0 130 2'
-                  fill='none'
-                >
-                  <path
-                    d='M0.827713 0.840111L0.427124 0.840111L0.427124 1.64131L0.827713 1.64131L0.827713 0.840111ZM129.019 0.840126L127.016 0.840125L127.016 1.64132L129.019 1.64132L129.019 0.840126ZM123.01 0.840125L119.004 0.840124L119.004 1.64132L123.01 1.64132L123.01 0.840125ZM114.998 0.840124L110.992 0.840123L110.992 1.64132L114.998 1.64132L114.998 0.840124ZM106.986 0.840123L102.98 0.840123L102.98 1.64132L106.986 1.64132L106.986 0.840123ZM98.974 0.840122L94.968 0.840122L94.968 1.64132L98.974 1.64132L98.974 0.840122ZM90.9621 0.840121L86.9561 0.840121L86.9561 1.64132L90.9621 1.64132L90.9621 0.840121ZM82.9501 0.84012L78.9442 0.84012L78.9442 1.64131L82.9501 1.64131L82.9501 0.84012ZM74.9382 0.840119L70.9322 0.840119L70.9322 1.64131L74.9382 1.64131L74.9382 0.840119ZM66.9263 0.840119L62.9203 0.840118L62.9203 1.64131L66.9263 1.64131L66.9263 0.840119ZM58.9143 0.840118L54.9083 0.840117L54.9083 1.64131L58.9143 1.64131L58.9143 0.840118ZM50.9024 0.840117L46.8964 0.840116L46.8964 1.64131L50.9024 1.64131L50.9024 0.840117ZM42.8904 0.840116L38.8844 0.840115L38.8844 1.64131L42.8904 1.64131L42.8904 0.840116ZM34.8785 0.840115L30.8725 0.840114L30.8725 1.64131L34.8785 1.64131L34.8785 0.840115ZM26.8665 0.840114L22.8605 0.840114L22.8605 1.64131L26.8665 1.64131L26.8665 0.840114ZM18.8546 0.840113L14.8486 0.840113L14.8486 1.64131L18.8546 1.64131L18.8546 0.840113ZM10.8426 0.840112L6.83665 0.840112L6.83665 1.64131L10.8426 1.64131L10.8426 0.840112ZM2.83068 0.840111L0.827713 0.840111L0.827713 1.64131L2.83068 1.64131L2.83068 0.840111Z'
-                    fill='url(#paint0_linear_28257_8061)'
-                  />
-                  <defs>
-                    <linearGradient
-                      id='paint0_linear_28257_8061'
-                      x1='0.827713'
-                      y1='1.24071'
-                      x2='131.562'
-                      y2='1.24072'
-                      gradientUnits='userSpaceOnUse'
-                    >
-                      <stop stop-color='white' stop-opacity='0' />
-                      <stop offset='0.9999' stop-color='white' />
-                      <stop offset='1' stop-color='white' stop-opacity='0' />
-                    </linearGradient>
-                  </defs>
-                </svg>
+                <div className={s.drag_line_inner}>
+                  <Image width={132} height={20} loading='eager' src='icons/fame-arrows.svg' alt='fame-arrows' />
+                  <Image width={132} height={20} loading='eager' src='icons/fame-arrows.svg' alt='fame-arrows' />
+                </div>
               </div>
               <div
                 ref={refWrap}

diff --git a/src/modules/landing/Componets/Intro/styles.module.scss b/src/modules/landing/Componets/Intro/styles.module.scss
@@ -99,9 +99,9 @@
   margin-left: auto;
   margin-right: auto;
   background: linear-gradient(
-                  -90deg,
-                  rgba(225, 225, 225, .07) 0,
-                  rgba(225, 225, 225, 0) 100%
+      -90deg,
+      rgba(225, 225, 225, .07) 0,
+      rgba(225, 225, 225, 0) 100%
   );
 
   transform: translateX(-20px);
@@ -125,11 +125,32 @@
 
   &_line {
     position: absolute;
-    top: 50%;
+    top: calc(50% - 10px);
     left: calc(50% - 5px);
     transform: translateX(-50%);
     pointer-events: none;
     z-index: 5;
+
+    &_inner {
+      position: relative;
+    }
+
+    img {
+
+      mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(171, 171, 171, 0) 100%);
+      -webkit-mask-position-x: -132px;
+      mask-repeat: no-repeat;
+      animation: looparrwos 4s ease-out infinite;
+
+      &:nth-child(2) {
+        width: 100%;
+        height: auto;
+        position: absolute;
+        top: 0;
+        left: 0;
+        animation-delay: 2s;
+      }
+    }
   }
 
   &_gradient {
@@ -142,9 +163,9 @@
     z-index: 2;
     pointer-events: none;
     background: linear-gradient(
-                    90deg,
-                    rgba(0, 0, 0, 1) var(--bg),
-                    rgba(171, 171, 171, 0) 100%
+        90deg,
+        rgba(0, 0, 0, 1) var(--bg),
+        rgba(171, 171, 171, 0) 100%
     );
   }
 }
@@ -203,12 +224,11 @@
     font-weight: 400;
     line-height: 140%; /* 19.6px */
     letter-spacing: 0.28px;
-    text-transform: uppercase;
-    top: -54px;
-    right: 3px;
+    top: -60px;
+    right: -32px;
 
     @include is-min-table {
-      right: 72px;
+      right: 35px;
     }
   }
 }
@@ -303,3 +323,12 @@
   pointer-events: none;
   background: rgba(255, 255, 255, var(--bg));
 }
+
+@keyframes looparrwos {
+  0% {
+    -webkit-mask-position-x: -132px;
+  }
+  100% {
+    -webkit-mask-position-x: 132px;
+  }
+}