Loading and minor update

iamafridi · Nov 9, 2024 · aad9fdc · aad9fdc
1 parent 771a7c2
commit aad9fdc
Show file tree

Hide file tree

Showing 3 changed files with 299 additions and 39 deletions.
diff --git a/index.html b/index.html
@@ -20,20 +20,25 @@
     />
   </head>
   <body>
+    <div id="loader">
+      <h1>ENVIRONMENTS</h1>
+      <h1>EXPERIENCES</h1>
+      <h1>CONTENT</h1>
+    </div>
     <div id="fixed-image"></div>
-    <div id="full-scr"></div>
+    <!-- <div id="full-scr"></div> -->
     <div id="main">
       <div id="page1">
         <!-- Nav Div -->
-        <div id="nav">
-          <h2>Elara <br />Studio</h2>
+        <nav id="nav">
+          <h2 >Elara <br />Studio</h2>
           <div class="nav-part2">
             <h4><a href="#">Work</a></h4>
             <h4><a href="#">Studio</a></h4>
             <h4><a href="#">Contact</a></h4>
           </div>
           <h3>Menu</h3>
-        </div>
+        </nav>
         <!-- Center Part  -->
         <div id="center">
           <div id="left">
@@ -108,34 +113,40 @@ <h1>
           <div id="effect2"></div> -->
         </div>
       </div>
-      <div id="page3">
-        <div id="elem-container">
-          <div class="elem" data-image="./assets/Images/Modern-Minimalism.jpg">
-            <div class="overlay"></div>
-            <h2>Modern Minimalism</h2>
-          </div>
-          <div class="elem" data-image="./assets/Images/Rustic-Revival.jpg">
-            <div class="overlay"></div>
-            <h2>Rustic Revival</h2>
-          </div>
-          <div class="elem" data-image="./assets/Images/Modern-Elegance.jpg">
-            <div class="overlay"></div>
-            <h2>Modern Elegance</h2>
-          </div>
-          <div class="elem" data-image="./assets/Images/Bohemian-Haven.jpg">
-            <div class="overlay"></div>
-            <h2>Bohemian Haven</h2>
-          </div>
-          <div
-            class="elem"
-            data-image="./assets/Images/Art-Deco-Extravaganza.jpg"
-          >
-            <div class="overlay"></div>
-            <h2>Art Deco Extravaganza</h2>
-          </div>
-          <div class="elem" data-image="./assets/Images/Tropical-Paradise.jpg">
-            <div class="overlay"></div>
-            <h2>Tropical Paradise</h2>
+      <div>
+        <div  id="page3">
+          <div id="elem-container">
+            <div
+              id="elem1"
+              class="elem"
+              data-image="./assets/Images/Modern-Minimalism.jpg"
+            >
+              <div class="overlay"></div>
+              <h2>Modern Minimalism</h2>
+            </div>
+            <div  class="elem" data-image="./assets/Images/Rustic-Revival.jpg">
+              <div class="overlay"></div>
+              <h2>Rustic Revival</h2>
+            </div>
+            <div class="elem" data-image="./assets/Images/Modern-Elegance.jpg">
+              <div class="overlay"></div>
+              <h2>Modern Elegance</h2>
+            </div>
+            <div class="elem" data-image="./assets/Images/Bohemian-Haven.jpg">
+              <div class="overlay"></div>
+              <h2>Bohemian Haven</h2>
+            </div>
+            <div
+              class="elem"
+              data-image="./assets/Images/Art-Deco-Extravaganza.jpg"
+            >
+              <div class="overlay"></div>
+              <h2>Art Deco Extravaganza</h2>
+            </div>
+            <div class="elem" data-image="./assets/Images/Tropical-Paradise.jpg">
+              <div class="overlay"></div>
+              <h2>Tropical Paradise</h2>
+            </div>
           </div>
         </div>
       </div>
@@ -153,11 +164,23 @@ <h2>Tropical Paradise</h2>
         </div>
       </div> -->
       <div id="page5"></div>
+      <div id="full-scr">
+        <div id="full-div1"></div>
+      </div>
     </div>
-    
+
     <!-- Footer -->
     <div id="footer">
-      <div class="visme_d" data-title="Untitled Project" data-url="epr4mnn1-untitled-project?fullPage=true" data-domain="forms" data-full-page="true" data-min-height="100vh" data-form-id="32740"></div><script src="https://static-bundles.visme.co/forms/vismeforms-embed.js"></script>
+      <div 
+        class="visme_d"
+        data-title="Untitled Project"
+        data-url="epr4mnn1-untitled-project?fullPage=true"
+        data-domain="forms"
+        data-full-page="true"
+        data-min-height="100vh"
+        data-form-id="32740"
+      ></div>
+      <script src="https://static-bundles.visme.co/forms/vismeforms-embed.js"></script>
       <div id="footer-div"></div>
       <h1>ELARA</h1>
       <div id="footer-bottom"></div>

diff --git a/script.js b/script.js
@@ -31,5 +31,34 @@ function swiperAnimation() {
 
   });
 }
-swiperAnimation();
-page4Animation();
+
+function menuAnimation() {
+
+  var menu = document.querySelector("nav h3")
+  var full = document.querySelector("#full-scr")
+  var navimg = document.querySelector("nav h2")
+  var flag = 0
+  menu.addEventListener("click", function () {
+      if (flag == 0) {
+          full.style.top = 0
+          navimg.style.opacity = 0
+          flag = 1
+      } else {
+          full.style.top = "-100%"
+          navimg.style.opacity = 1
+          flag = 0
+      }
+  })
+}
+
+function loaderAnimation() {
+  var loader = document.querySelector("#loader")
+  setTimeout(function () {
+      loader.style.top = "-100%"
+  }, 4200)
+}
+
+swiperAnimation()
+page4Animation()
+menuAnimation()
+loaderAnimation()