animation

alurubalakarthikeya · Aug 7, 2024 · 4fb601b · 4fb601b
1 parent 827d31d
commit 4fb601b
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 15 deletions.
diff --git a/index.html b/index.html
@@ -26,7 +26,7 @@
     </div>
   </div>
   <!--End of loader-->
-  <header>
+  <header class="navbar">
     <div class="logo"><a href="index.html">Mini <span>Minds</span></a></div>
     <nav>
         <div id="menu-icon" class="menu-icon">&#9776;</div>
@@ -84,7 +84,7 @@ <h2 class="hehe fadeInUp-animation">Where Learning is <span>made practical</span
             <div class="cloud cloud-2 "><img src="images/cloudy.png" alt="Cloud"></div>
         </div>
         <!--Cloud resource end-->
-        <div class="back-to-top"><i class="fa-solid fa-caret-up"></i></div>
+        <div class="back-to-top"><a href="#"><i class="fa-solid fa-caret-up"></a></i></div>
       </div>
     <!--Home Page Ends-->
     <!--Tree resource-->

diff --git a/script.js b/script.js
@@ -74,7 +74,7 @@ gsap.utils.toArray('.fade-in-up-target').forEach(el => {
       duration: 2,
       scrollTrigger: {
         trigger: el,
-        start: 'top 90%',
+        start: 'top 95%',
         end: 'bottom 10%',
         scrub: true
       }
@@ -91,8 +91,8 @@ gsap.utils.toArray('.fade-in-left-target').forEach(el => {
       duration: 2,
       scrollTrigger: {
         trigger: el,
-        start: 'top 90%',
-        end: 'bottom 1s0%',
+        start: 'top 95%',
+        end: 'bottom 10%',
         scrub: true
       }
     }
@@ -107,8 +107,8 @@ gsap.utils.toArray('.fade-in-right-target').forEach(el => {
       duration: 2,
       scrollTrigger: {
         trigger: el,
-        start: 'top 80%',
-        end: 'bottom 20%',
+        start: 'top 95%',
+        end: 'bottom 10%',
         scrub: true
       }
     }
@@ -173,4 +173,3 @@ function signUp() {
   });
 /*Loader Animation*/
 
-
diff --git a/styles.css b/styles.css
@@ -148,7 +148,7 @@ nav ul.active {
     font-size: 3vh;
     margin-top: 35vh;
     position: relative;
-    z-index: 100;
+    z-index: 1000;
 }
 
 body.night .hero-content {
@@ -545,7 +545,7 @@ body.day nav ul {
     left: 0;
     transform: translate(-50%, -50%);
     border-radius: 50%;
-    z-index: 101;
+    z-index: 100000;
     pointer-events: none;
 }
 
@@ -855,7 +855,7 @@ body.day .box {
     color: var(--moon-color);
     border: 2px solid var(--moon-color);
     border-radius: 15px;
-    padding: 10px 90px;
+    padding: 10px 110px;
     left: 50%;
     margin-top: 15px;
     font-family: "Anek Devanagari", sans-serif;
@@ -940,7 +940,7 @@ body.day .sign-in:hover {
 }
 
 .hero-content button {
-    width: 90%;
+    width: 100%;
     box-sizing: border-box;
 }
 
@@ -1270,13 +1270,17 @@ dialog {
     border-radius: 50%;
     padding: 9px 16px 7px 16px;
     position: fixed;
-    top: 85%;
-    right: 5%;
+    top: 88%;
+    right: 8%;
     font-size: 2vh;
     transition: 0.4s ease;
   }
 
   .back-to-top:hover {
     background-color: var(--main-white);
-    color: #008000;
+    color: var(--main-green);
+  }
+
+  .navbar {
+    position: sticky;
   }