ScrollReveal animation added to the page

MessageSilo · Feb 21, 2024 · fc3f328 · fc3f328
1 parent 13e044e
commit fc3f328
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -80,11 +80,13 @@
       href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap"
       rel="stylesheet"
     />
+
+    <script src="https://unpkg.com/scrollreveal"></script>
     <script src="nav.js" defer></script>
     <!-- Place this tag in your head or just before your close body tag. -->
     <script async defer src="https://buttons.github.io/buttons.js"></script>
     <script src="index.js" defer></script>
-    <script src="https://unpkg.com/scrollreveal"></script>
+
   </head>
 
   <body>
@@ -268,6 +270,7 @@ <h2 class="header--primary">
           />
         </div>
       </section>
+
       <section class="github">
         <div class="github-banner">
           <h2 class="header--primary">

diff --git a/nav.js b/nav.js
@@ -38,9 +38,6 @@ document.addEventListener("scroll", ()=>{
       header.classList.remove("scrolled");
     }
   }
-
-
-
 }
 )
 
@@ -53,5 +50,18 @@ window.addEventListener("resize", () => {
     document.body.classList.remove("resize-animation-stopper");
   }, 400);
 });
+//-------------------------------------------------------
 
-
+//Scroll Reveal Animations 
+ScrollReveal().reveal('.hero', { duration: 1500, reset: true ,distance: "100px"})
+ScrollReveal().reveal('.divider', { duration: 1500, reset: true,distance: "100px"})
+ScrollReveal().reveal('.message', { duration: 1500 , reset: true,distance: "100px"})
+ScrollReveal().reveal('.features', { duration: 1500 , reset: true,distance: "100px"})
+ScrollReveal().reveal('.card__container', { duration: 1500 , reset: true,distance: "100px"})
+ScrollReveal().reveal('.about', { duration: 1500 , reset: true,distance: "100px"})
+ScrollReveal().reveal('.try-it', { duration: 1500 , reset: true,distance: "100px"})
+ScrollReveal().reveal('.api', { duration: 1500 , reset: true,distance: "100px"})
+ScrollReveal().reveal('.github', { duration: 1500 , reset: true,distance: "100px"})
+ScrollReveal().reveal('.footer__container', { duration: 1500 , reset: true,distance: "100px"})
+ScrollReveal().reveal('.footer__copyright', { duration: 1500 , reset: true,distance: "100px"})
+//--------------------------------------------------------