Added feature of Reaveal elements on scroll to all files

Anishkagupta04#1169
Anjaliavv51 · Aug 10, 2024 · 78c6693 · 78c6693
1 parent 7da1500
commit 78c6693
Show file tree

Hide file tree

Showing 14 changed files with 87 additions and 20 deletions.
diff --git a/Html-Files/appointment.html b/Html-Files/appointment.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>RapiDoc</title>
+    <script src="https://unpkg.com/scrollreveal"></script>
     <link
       rel="icon"
       href="https://cdn-icons-png.flaticon.com/512/1458/1458279.png"
@@ -1243,5 +1244,14 @@ <h4>RAPIDOC Newsletter</h4>
         }
       });
     </script>
+    <script>
+      ScrollReveal({
+    //reset: true ,
+    distance: '60px',
+    duration: 2500,
+    delay: 400
+  });
+  ScrollReveal().reveal('.container', { delay: 600, origin: 'bottom' ,interval:200});
+    </script>
   </body>
 </html>
diff --git a/Html-Files/blood.html b/Html-Files/blood.html
@@ -17,6 +17,7 @@
 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
 
 <title>RapiDoc</title>
+<script src="https://unpkg.com/scrollreveal"></script>
 </head>
 
 <body>
@@ -211,8 +212,8 @@ <h4>RAPIDOC Newsletter</h4><br>
         <div id="popupContent"></div>
     </div>
     </div>
-      <script src="../js/backtotopjs.js"></script>
-      <script src="../js/popupbloodlist.js"></script>
+<script src="../js/backtotopjs.js"></script>
+<script src="../js/popupbloodlist.js"></script>
 <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
 <script src="glightbox/js/glightbox.min.js"></script>
 <script src="php-email-form/validate.js"></script>
@@ -224,5 +225,14 @@ <h4>RAPIDOC Newsletter</h4><br>
 <script src="patient-portal.js"></script>
 <script src="swiper-bundle.min.js"></script>
 <script src="https://mediafiles.botpress.cloud/b1d766f9-2fd0-4a60-96bb-fc1f494d156c/webchat/config.js" defer></script>
+<script>
+  ScrollReveal({
+    //reset: true ,
+    distance: '60px',
+    duration: 2500,
+    delay: 400
+  });
+  ScrollReveal().reveal('.container .drop ,.container .drop .content', { delay: 600, origin: 'bottom' ,interval:200});
+</script>
 </body>
 </html>
diff --git a/Html-Files/bloodtest.html b/Html-Files/bloodtest.html
@@ -1,6 +1,7 @@
 <html lang="en" class="sr">
   <head>
   <meta charset="utf-8">
+  <script src="https://unpkg.com/scrollreveal"></script>
   <meta content="width=device-width, initial-scale=1.0" name="viewport">
   <link rel="icon" type="image/x-icon" href="../favicon.png">
   <link rel="stylesheet" type="text/css" href="../style.css">
@@ -66,6 +67,7 @@
     <div class="container d-flex align-items-center">
     </div>
   </header>
+
   <div class="conta" style="display: flex; flex-wrap: wrap;">
     <div class="container" style="display:flex ;">
         <div class="bloodtest">
@@ -213,5 +215,14 @@ <h4>RAPIDOC Newsletter</h4><br>
   <script src="../js/chatbotjs.js"></script>
   <script src="https://www.chatbase.co/embed.min.js" chatbotid="xjRGZgxJziSoHQ1T1twl6" domain="www.chatbase.co" defer=""></script>
   <script src="../js/chatbotjs.js"></script>
+  <script>
+    ScrollReveal({
+      //reset: true ,
+      distance: '60px',
+      duration: 2500,
+      delay: 400
+    });
+    ScrollReveal().reveal('.conta .container .bloodtest,.conta .container', { delay: 700, origin: 'bottom' ,interval:200});
+  </script>
   </body>
   </html>
diff --git a/about.html b/about.html
@@ -22,6 +22,7 @@
     />
     <!--=============== CSS ===============-->
     <link rel="stylesheet" href="assets/css/styles.css" />
+    <script src="https://unpkg.com/scrollreveal"></script>
     <style>
         button {
   position: relative;
@@ -289,13 +290,7 @@
     </p></p></p>
   </p></p></p></p></p></p></p></p></p></p>
   <section class="about">
-
-
-    <h2 style="color: #0a0000;">About SwapReads</h2>
-    <p style="color: #444;">
-
-
-    <h2 style="color: white;">About RapiDoc</h2>
+    <h2 style="color: white;" class="h">About RapiDoc</h2>
     <p style="color: grey;">
         RapiDoc is an innovative healthcare platform designed to streamline and enhance the medical experience for both patients and healthcare providers. 
         Our mission is to make quality healthcare more accessible, efficient, and user-friendly through the power of technology. 
@@ -630,6 +625,7 @@ <h4>RAPIDOC Newsletter</h4><br>
         speed: 400
       });
     </script>
+    <script src="./js/about.js"></script>
           <script>
 
             // Function for the contributors section

diff --git a/aptmnt.html b/aptmnt.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>RapiDoc</title>
+    <script src="https://unpkg.com/scrollreveal"></script>
     <style>
         body {
             font-family: Arial, sans-serif;

diff --git a/checkup.html b/checkup.html
@@ -56,6 +56,7 @@
   <link rel="stylesheet" href="./Css-Files/aboutus.css" />
   <link rel="stylesheet" href="./Css-Files/testimonial.css" />
   <script src="chatboxx.js" defer></script>
+  <script src="https://unpkg.com/scrollreveal"></script>
     <link rel="stylesheet" href="checkup.css">
 </head>
 <body>
@@ -100,7 +101,7 @@
       <div class="container" style="display:flex ;">
         <div class="content">
 
-          <h1 >
+          <h1 class="h1">
             Welcome to <span style="color: #55a5ea;">RapiDoc!</span>  Your one-stop digital  healthcare
             destination
           </h1>
@@ -153,7 +154,7 @@ <h2>Pediatric Health Checkup</h2>
 
 
     <section id="expect">
-        <h1>What to <span style="color: #55a5ea;">Expect?</h1>
+        <h1 class="h1">What to <span style="color: #55a5ea;">Expect?</h1>
         <div class="expect-grid">
             <div class="expect-item">
                 <h2 >1</h2>
@@ -193,7 +194,7 @@ <h2>5</h2>
     </script>
 
     <section id="tips">
-      <h2 >
+      <h2 class="h1">
         Health<span style="color: #55a5ea;"> Tips</span>
 
     </h2>

diff --git a/checkup.js b/checkup.js
@@ -7,4 +7,12 @@ document.addEventListener('DOMContentLoaded', function() {
     });
   });
 
-
+  ScrollReveal({
+    //reset: true ,
+    distance: '60px',
+    duration: 2500,
+    delay: 400
+  });
+  ScrollReveal().reveal('.h1', { delay: 400, origin: 'left' });
+  ScrollReveal().reveal('.sec-img', { delay: 400, origin: 'right' });
+  ScrollReveal().reveal('.services-grid .services-item,.expect-grid .expect-item,.tip-grid .tip-item', { delay: 500, origin: 'bottom',interval:300 });
diff --git a/dex.html b/dex.html
@@ -10,6 +10,7 @@
   <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
   <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
   <link rel="stylesheet" type="text/css" href="./style.css" />
+  <script src="https://unpkg.com/scrollreveal"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
   <link
       rel="stylesheet"

diff --git a/faq.html b/faq.html
@@ -1028,7 +1028,6 @@
 
 </header>
   <!-- header -->
-
   <!-- faq -->
 
 <div id="page-content" class="page-content">
@@ -1043,7 +1042,7 @@ <h1 class="pt-5">Frequently Asked Questions!</h1>
     </div>
 
     <div id="faq-container" class="faq-container">
-        <input type="text" id="faq-search" placeholder="⌕ Search your questions here.." onkeyup="filterFAQs()">
+        <input type="text" id="faq-search" class="faq-search" placeholder="⌕ Search your questions here.." onkeyup="filterFAQs()">
 
         <div class="faq-category">
             <div class="faq-item" onclick="toggleAnswer('question1')">
@@ -1418,7 +1417,7 @@ <h4>RAPIDOC Newsletter</h4><br>
   </div>
 
   <!-- footer -->
-
+  <script src="./js/faq.js"></script>
 <script>
     function toggleAnswer(id) {
 var answer = document.getElementById(id);

diff --git a/helpline.html b/helpline.html
@@ -48,6 +48,7 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
   <link rel="stylesheet" href="chatbox.css">
+  <script src="https://unpkg.com/scrollreveal"></script>
   <!-- Google Fonts Link For Icons chatboxx -->
   <link rel="stylesheet"
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
@@ -98,7 +99,7 @@
       <div class="container" style="display:flex ;">
         <div class="content">
 
-          <h1 >
+          <h1>
             <span style="color: #55a5ea;">Need help?</span> Contact our Helpline
           </h1>
 

diff --git a/js/about.js b/js/about.js
@@ -0,0 +1,14 @@
+ScrollReveal({
+    //reset: true ,
+    distance: '60px',
+    duration: 2500,
+    delay: 400
+  });
+  ScrollReveal().reveal('.h', { delay: 500, origin: 'left' });
+  ScrollReveal().reveal('.stats-box,.team', { delay: 600, origin: 'bottom' ,interval:200});
+  ScrollReveal().reveal('.contributors', { delay: 700, origin: 'bottom' ,interval:200});
+
+  ScrollReveal().reveal('.sec-img', { delay: 500, origin: 'right' });
+  ScrollReveal().reveal('.col-md-6,.about', { delay: 600, origin: 'left' });
+  ScrollReveal().reveal('.col-lg-3', { delay: 500, origin: 'left' });
+  ScrollReveal().reveal('.feedback', { delay: 400, origin: 'left' });
diff --git a/js/faq.js b/js/faq.js
@@ -0,0 +1,8 @@
+ScrollReveal({
+    //reset: true ,
+    distance: '60px',
+    duration: 2500,
+    delay: 400
+  });
+  ScrollReveal().reveal('.pt-5,.lead', { delay: 400, origin: 'left' ,interval:200});
+  ScrollReveal().reveal('.faq-container .faq-search,.faq-item', { delay: 600, origin: 'bottom' ,interval:200});
diff --git a/js/helpline.js b/js/helpline.js
@@ -31,4 +31,12 @@ emergencyButton.addEventListener('click', (event) => {
 
 closeButton.addEventListener('click', () => {
   popupContainer.style.visibility = 'hidden';
-});
+});
+
+ScrollReveal({
+  //reset: true ,
+  distance: '60px',
+  duration: 2500,
+  delay: 400
+});
+ScrollReveal().reveal('.content', { delay: 400, origin: 'left' ,interval:200});
diff --git a/js/revealelementsonscrolljsfor_index_html.js b/js/revealelementsonscrolljsfor_index_html.js
@@ -1,4 +1,3 @@
-
 ScrollReveal({
     //reset: true ,
     distance: '60px',
@@ -11,4 +10,4 @@ ScrollReveal({
   ScrollReveal().reveal('.col-md-6,.about', { delay: 600, origin: 'left' });
   ScrollReveal().reveal('.col-lg-3', { delay: 500, origin: 'left' });
   ScrollReveal().reveal('.feedback', { delay: 400, origin: 'left' });
-  ScrollReveal().reveal('.footer', { delay: 400, origin: 'bottom' });
+  ScrollReveal().reveal('.footer', { delay: 400, origin: 'bottom' });