page transition done

abhishektyagi2912 · Dec 20, 2023 · d2fd227 · d2fd227
1 parent 3f10a35
commit d2fd227
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -16,6 +16,10 @@
 
 <body>
     <div id="main" class="smooth-scroll">
+        <div class="transition">
+            <div class="cover cover1"></div>
+            <div class="cover cover2"></div>
+        </div>
         <div id="home">
             <div id="nav-container">
                 <div id="nav">
@@ -177,11 +181,10 @@ <h1>
             </div>
             <div id="work">
                 <div class="workcontent">
-                    <img src="./assests/img/android.png"
-                        alt="">
+                    <img src="./assests/img/android.png" alt="">
                     <h1>E-commerce <span>Website</span></h1>
                     <div class="page4btn">
-                        <a href="">View More</a>
+                        <a class="link" href="./pages/expresschat.html">View More</a>
                     </div>
                 </div>
                 <div class="workcontent">
@@ -228,7 +231,7 @@ <h1>Inetersted in</h1>
                     <h2>Working Together</h2>
                 </div>
                 <div id="connectbtn" class="magnet">
-                    <a href="#">Start a project</a>
+                    <a class="link" href="./pages/projects.html ">Start a project</a>
                 </div>
             </div>
         </div>

diff --git a/javascript/index.js b/javascript/index.js
@@ -136,4 +136,14 @@ function isOverPage4Btn(details, elem) {
 
 function sendEmail() {
     window.location.href = "mailto:your-abhishekpersonal2912@gmail.com?subject=I%20want%20to%20work%20with%20you";
-}
+}
+
+const link = document.querySelector(".link");
+const transition = document.querySelector(".transition");
+link.addEventListener("click", (e) => {
+    e.preventDefault();
+    transition.classList.add("slide"); // Use the correct class name "slide" here
+    setTimeout(() => {
+        window.location = link.href;
+    }, 900);
+});
diff --git a/pages/expresschat.html b/pages/expresschat.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <h1>Express Chat it is</h1>
+</body>
+</html>
diff --git a/pages/projects.html b/pages/projects.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <h1>Hi</h1>
+</body>
+</html>
diff --git a/stylesheet/style.css b/stylesheet/style.css
@@ -623,4 +623,34 @@ hr {
     border-radius: 70px;
     font-weight: 600;
     color: #000;
+}
+
+.cover {
+    position: fixed;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: -100vw;
+    z-index: 1000;
+}
+
+.transition.slide .cover1 {
+    background-color: #a1936f;
+    animation: slide 0.3s ease-in-out forwards;
+}
+
+.transition.slide .cover2 {
+    background-color: #D6D1C5;
+    animation: slide 0.3s ease-in-out forwards;
+    animation-delay: 0.3s;
+}
+
+@keyframes slide {
+    from {
+        left: -100vw;
+    }
+
+    to {
+        left: 0;
+    }
 }