Feat: Added Distort effect to title

gdcmec · Oct 16, 2024 · 41a9cb8 · 41a9cb8
1 parent 008f330
commit 41a9cb8
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 38 deletions.
diff --git a/src/components/Landing/Landing.css b/src/components/Landing/Landing.css
@@ -120,46 +120,36 @@ body{
     z-index: 2;
     cursor: default;
     z-index: 1;
-    color: yellow;
+    color: #E66A1C;
     background: -webkit-linear-gradient(#E66A1C, #F8BE1E);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }
 
 
-.landing-h1:hover:before,
-.landing-h1:hover:after {
-    /* padding: 30px; */
-    content: "Game Development\nClub";
-    white-space: pre;
-    text-align: center;
-    /* display: block; */
-    color: rgb(78, 78, 24);
-    /* content: attr(data-text); */
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    z-index: 2;
-    overflow: hidden;
-    top: 0;
-  }
-
-  .landing-h1:hover{
-    animation: glitch-1 2s linear infinite reverse;
-  }
 
-  .landing-h1:hover::before{
-    left: 3px;
-    text-shadow: -2px 0 red;
-    animation: glitch-2 2s linear infinite reverse;
-
+.landing-h1:before,.landing-h1:after{
+  /* padding: 30px; */
+  color: #F8BE1E;
+  content: attr(data-text);
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  top: 0;
+}
+.landing-h1::before{
+  left: 5px;
+  text-shadow: -2px 0 red;
+  animation: glitch-2 2.5s linear infinite reverse;
 
-  }
-  .landing-h1:hover::after{
-    left: -3px;
-    text-shadow: -2px 0 blue;
-    animation: glitch-2 2s linear infinite reverse;
-  }
+
+}
+.landing-h1::after{
+  left: -5px;
+  text-shadow: -2px 0 #E66A1C;
+  animation: glitch-2 2.5s linear infinite reverse;
+}
 
 
 
@@ -485,6 +475,10 @@ body{
         height: 100vdh;
     }
 
+    .landing-h1:before,.landing-h1:after{
+      content: "";
+    }
+
     #sub{
         font-size: 16px;
     }
@@ -561,10 +555,9 @@ body{
       background-image: linear-gradient(to bottom, #3D3D3D, #1F1F1F);
       flex-direction: column;
   }
-  .landing-h1:hover:before,
-  .landing-h1:hover:after {
-  content: '';
-}
+  .landing-h1:before,.landing-h1:after{
+    content: "";
+  }
 
   .landing h1{
       font-size: 4rem;
@@ -675,6 +668,9 @@ body{
         left: -550px;
         top: -180px;
     }
+    /* .landing-h1:before,.landing-h1:after{
+      content: "";
+    } */
 
     .con2{
         right: -550px;
@@ -845,7 +841,7 @@ body{
   }
 }
 
-@media (min-width: 300px) and (max-width: 500px) {
+@media (min-width: 300px) and (max-width: 500px) and (max-height:600px)  {
   .landing-h1{
     scale: 0.9;
   }

diff --git a/src/components/Landing/Landing.jsx b/src/components/Landing/Landing.jsx
@@ -44,7 +44,8 @@ const landing = () => {
                whileInView={{opacity: 1, y: 0}}
                transition={{duration: 1}}
                className='landing-h1'
-              >Game Development<br></br>Club<br></br></motion.h1>
+               data-text = "Game Development">
+              <h1 className='landing-h1'>Game Development<br></br>Club<br></br></h1></motion.h1>
               <motion.span
               id = "sub"
               initial={{ opacity: 0, y: -50}}