From 6c79559132c2c4c8dc9d9d850735dbdcf32c3c2e Mon Sep 17 00:00:00 2001
From: quick developer coder <deepak9860yadav@gmail.com>
Date: Sat, 14 Dec 2024 14:14:15 +0530
Subject: animation updated

---
 divine/index.html |  48 +++++++++---------
 divine/script.js  | 143 +++++++++++++++++++++++++++++++++++++++++++----------
 divine/styles.css | 144 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 3 files changed, 284 insertions(+), 51 deletions(-)

diff --git a/divine/index.html b/divine/index.html
index 3002b68..3dfa67e 100644
--- a/divine/index.html
+++ b/divine/index.html
@@ -26,8 +26,8 @@
             <a href="#contact">Contact</a>
         </nav>
     </header>
-
-
+    
+    
 
     <section class="hero-section">
         <h2>Welcome to Divine Classes</h2>
@@ -35,7 +35,7 @@
         <a href="#services" class="cta-button">Explore Services</a>
     </section>
 
-    <section class="features" id="services">
+    <section class="features" id="services"> 
         <h2>Our Features</h2>
         <div class="features-list">
             <div class="feature-item">
@@ -60,7 +60,7 @@
             </div>
         </div>
     </section>
-
+    
 
     <section class="courses" id="courses">
         <h2>Our Courses</h2>
@@ -68,23 +68,23 @@
             <div class="course-item">
                 <h3>English Speaking Course</h3>
                 <p>Enhance your communication skills for all age groups.</p>
-
+  
             </div>
-
+            
             <div class="course-item">
                 <h3>Private Tuition</h3>
                 <p>Get personalized coaching from experienced educators.</p>
-
+    
             </div>
             <div class="course-item">
                 <h3>V-X Curriculum</h3>
                 <p>Specialized coaching for students in classes V-X for all subjects.</p>
-
+     
             </div>
             <div class="course-item">
                 <h3>ICSE</h3>
                 <p>In-depth coaching for ICSE students to excel in their exams.</p>
-
+      
             </div>
             <div class="course-item">
                 <h3>CBSE</h3>
@@ -98,7 +98,7 @@
             </div>
         </div>
     </section>
-
+    
     <section class="testimonials" id="testimonials">
         <h2>What Our Students Say</h2>
         <div class="testimonial">
@@ -113,32 +113,32 @@
 
     <section class="faq" id="faq">
         <h2>Frequently Asked Questions</h2>
-
+        
         <!-- FAQ Item 1 -->
         <div class="faq-item">
             <h3 class="faq-question">What courses do you offer?</h3>
             <p class="faq-answer">We offer a variety of courses, including science, mathematics, language learning, and preparation for competitive exams.</p>
         </div>
-
+    
         <!-- FAQ Item 3 -->
         <div class="faq-item">
             <h3 class="faq-question">Do you provide study materials?</h3>
             <p class="faq-answer">Yes, we provide comprehensive study materials, including notes, practice questions, and sample papers.</p>
         </div>
-
+    
         <!-- FAQ Item 4 -->
         <div class="faq-item">
             <h3 class="faq-question">Are the classes available online?</h3>
             <p class="faq-answer">Yes, we offer both online and offline classes to suit the convenience of our students.</p>
         </div>
-
+    
         <!-- FAQ Item 5 -->
         <div class="faq-item">
             <h3 class="faq-question">How can I contact the faculty?</h3>
             <p class="faq-answer">You can contact faculty members directly through email or via contact number.</p>
         </div>
     </section>
-
+    
 
     <section class="contact-section" id="contact">
         <h2>Contact Us</h2>
@@ -147,24 +147,24 @@
             <p><strong>Anoop Singh</strong><br>Professor</p>
             <p><strong>Vinayak Kadam</strong><br>Administration</p>
         </div>
-
-
-        <p><strong>Address:</strong>
+        
+        
+        <p><strong>Address:</strong> 
             <a href="https://www.google.com/maps?q=Shop+No.+A+02,+Meera+Avenue,+Beside+Agarwal+Exotica,+Yashwant+Smart+City,+Near+Vasai+IGS+School,+Vasai+(E)" target="_blank" class="address-link">
                 Shop No. A 02, Meera Avenue, Beside Agarwal Exotica, Yashwant Smart City, Near Vasai IGS School, Vasai (E)
             </a>
         </p>
-        <p><strong>Email:</strong>
+        <p><strong>Email:</strong> 
             <a href="mailto:linu@divineclasses.in" class="email-link">linu@divineclasses.in</a>
         </p>
-        <p><strong>Phone:</strong>
-            <a href="tel:+918888444476" class="phone-link">88884 44476</a> |
-            <a href="tel:+918888444418" class="phone-link">88884 44418</a> |
-            <a href="tel:+918605920081" class="phone-link">86059 20081</a> |
+        <p><strong>Phone:</strong> 
+            <a href="tel:+918888444476" class="phone-link">88884 44476</a> | 
+            <a href="tel:+918888444418" class="phone-link">88884 44418</a> | 
+            <a href="tel:+918605920081" class="phone-link">86059 20081</a> | 
             <a href="tel:+919226755438" class="phone-link">92267 55438</a>
         </p>
     </section>
-
+    
 
     <footer>
         <p>&copy; 2024 Divine Classes. All rights reserved.</p>
diff --git a/divine/script.js b/divine/script.js
index ec6a283..958ff24 100644
--- a/divine/script.js
+++ b/divine/script.js
@@ -1,43 +1,134 @@
-// JavaScript to trigger scroll-based animations
-window.addEventListener("scroll", function () {
+// Updated JavaScript Code for Scroll Animations, FAQ Toggle, and Scroll-to-Top Button
+
+document.addEventListener("DOMContentLoaded", function () {
+    // Scroll-Based Animations with Debouncing
     const elements = document.querySelectorAll(".hero-section, .features, .courses, .testimonials, .contact-section");
-    elements.forEach(function (element) {
-        if (element.getBoundingClientRect().top < window.innerHeight) {
-            element.classList.add("visible");
-        }
+    const handleScroll = () => {
+        elements.forEach((element) => {
+            if (element.getBoundingClientRect().top < window.innerHeight) {
+                element.classList.add("visible");
+            }
+        });
+    };
+
+    let debounceTimer;
+    window.addEventListener("scroll", () => {
+        clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(handleScroll, 100);
     });
-});
 
-document.addEventListener("DOMContentLoaded", function() {
+    // FAQ Section Toggle
     const faqItems = document.querySelectorAll(".faq-item");
 
-    faqItems.forEach(item => {
-        item.querySelector(".faq-question").addEventListener("click", () => {
+    faqItems.forEach((item) => {
+        const question = item.querySelector(".faq-question");
+        question.setAttribute("tabindex", "0"); // Make it keyboard accessible
+
+        const toggleAnswer = () => {
             item.classList.toggle("active");
+        };
+
+        question.addEventListener("click", toggleAnswer);
+        question.addEventListener("keydown", (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+                toggleAnswer();
+                e.preventDefault(); // Prevent page scroll on space key
+            }
         });
     });
-});
 
 
-// Get the button
-const scrollToTopButton = document.getElementById("scroll-to-top");
+    
+    // Scroll-to-Top Button
+    const scrollToTopButton = document.getElementById("scroll-to-top");
 
-// When the user scrolls down 100px from the top of the document, show the button
-window.onscroll = function() {
-    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
-        scrollToTopButton.style.display = "block";
-    } else {
-        scrollToTopButton.style.display = "none";
-    }
-};
+    const handleScrollButtonVisibility = () => {
+        scrollToTopButton.style.display = window.scrollY > 100 ? "block" : "none";
+    };
 
-// When the user clicks on the button, scroll to the top of the document
-scrollToTopButton.addEventListener("click", function() {
-    window.scrollTo({
-        top: 0,
-        behavior: "smooth"  // Smooth scroll effect
+    window.addEventListener("scroll", handleScrollButtonVisibility);
+
+    scrollToTopButton.addEventListener("click", () => {
+        window.scrollTo({
+            top: 0,
+            behavior: "smooth",
+        });
     });
+
+     // Prevent button visibility during downward animations
+     let isScrolling = false;
+     const throttleScrollHandler = () => {
+         if (!isScrolling) {
+             window.requestAnimationFrame(() => {
+                 handleScrollButtonVisibility();
+                 isScrolling = false;
+             });
+         }
+         isScrolling = true;
+     };
+
+    // Initial Trigger for Scroll Animations and Button Visibility
+    handleScroll();
+    handleScrollButtonVisibility();
+});
+
+
+
+
+
+
+
+
+
+
+
+
+
+document.addEventListener("DOMContentLoaded", () => {
+    const sections = document.querySelectorAll(".features, .courses, .testimonials, .faq");
+
+    const observer = new IntersectionObserver(
+        (entries, observer) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add("animate");
+                    observer.unobserve(entry.target); // Stop observing once animated
+                }
+            });
+        },
+        { threshold: 0.1 }
+    );
+
+    sections.forEach((section) => observer.observe(section));
 });
 
 
 
+
+
+
+
+
+
+
+// Function to check if an element is in the viewport
+function isInViewport(element) {
+    const rect = element.getBoundingClientRect();
+    return rect.top <= window.innerHeight && rect.bottom >= 0;
+}
+
+// Scroll event listener
+function handleScroll() {
+    const elements = document.querySelectorAll('.feature-item, .course-item, .testimonial, .faq-item');
+    elements.forEach((el) => {
+        if (isInViewport(el)) {
+            el.classList.add('animate');
+        }
+    });
+}
+
+// Attach event listener to the window
+window.addEventListener('scroll', handleScroll);
+
+// Trigger animation on load (in case elements are already in view)
+handleScroll();
\ No newline at end of file
diff --git a/divine/styles.css b/divine/styles.css
index 7ca4ce5..418988e 100644
--- a/divine/styles.css
+++ b/divine/styles.css
@@ -11,7 +11,6 @@ html {
     scroll-behavior: smooth;
 }
 
-/* Header Styles */
 header {
     background: linear-gradient(90deg, #007BFF, #FF6F00);
     color: white;
@@ -161,6 +160,7 @@ header .nav a:hover {
     flex: 1;
     min-width: 250px;
     transition: transform 0.3s;
+    will-change: transform;
 }
 
 .feature-item:hover {
@@ -171,6 +171,7 @@ header .nav a:hover {
 .courses {
     background-color: white;
     padding: 60px 10%;
+    will-change: transform;
 }
 
 .courses h2 {
@@ -184,6 +185,7 @@ header .nav a:hover {
     justify-content: space-between;
     gap: 20px;
     flex-wrap: wrap;
+
 }
 
 .course-item {
@@ -194,6 +196,7 @@ header .nav a:hover {
     flex: 1;
     min-width: 250px;
     transition: transform 0.3s;
+    will-change: transform;
 }
 
 .course-item a {
@@ -202,6 +205,7 @@ header .nav a:hover {
     color: #007BFF;
     text-decoration: none;
     font-weight: bold;
+    will-change: transform;
 }
 
 .course-item:hover {
@@ -214,10 +218,12 @@ header .nav a:hover {
     color: white;
     text-align: center;
     padding: 60px 20px;
+    will-change: transform;
 }
 
 .testimonials h2 {
     margin-bottom: 30px;
+
 }
 
 .testimonial {
@@ -228,6 +234,7 @@ header .nav a:hover {
     border-radius: 10px;
     max-width: 600px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    will-change: transform;
 }
 
 /* FAQ Section Styles */
@@ -235,6 +242,7 @@ header .nav a:hover {
     background-color: #f4f4f4;
     padding: 60px 10%;
     text-align: center;
+    will-change: transform;
 }
 
 .faq h2 {
@@ -253,6 +261,7 @@ header .nav a:hover {
     border-radius: 8px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
+    will-change: transform;
 }
 
 .faq-item:hover {
@@ -266,6 +275,7 @@ header .nav a:hover {
     color: #007BFF;
     cursor: pointer;
     transition: color 0.3s ease;
+    will-change: transform;
 }
 
 .faq-answer {
@@ -274,6 +284,7 @@ header .nav a:hover {
     margin-top: 10px;
     display: none;
     line-height: 1.6;
+    will-change: transform;
 }
 
 /* Hover effect on question */
@@ -479,3 +490,134 @@ footer {
 
 
 
+
+/* Animations */
+@keyframes slideInRight {
+    0% {
+        transform: translateX(-100%);
+        opacity: 0;
+    }
+    100% {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes slideInLeft {
+    0% {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    100% {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+/* Default hidden state for animations */
+.features, .courses, .testimonials, .faq {
+    opacity: 0;
+    transition: opacity 0.5s ease-in-out;
+}
+
+/* Trigger animations */
+.features.animate {
+    animation: slideInLeft 1s ease-in-out;
+    opacity: 1;
+}
+
+.courses.animate {
+    animation: slideInRight 1s ease-in-out;
+    opacity: 1;
+}
+
+.testimonials.animate {
+    animation: fadeIn 1.5s ease-in-out;
+    opacity: 1;
+}
+
+.faq.animate {
+    animation: slideInLeft 1s ease-in-out;
+    opacity: 1;
+}
+
+
+
+
+
+
+
+
+
+
+
+/* Animations */
+@keyframes slideInRight {
+    0% {
+        transform: translateX(-100%);
+        opacity: 0;
+    }
+    100% {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes slideInLeft {
+    0% {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    100% {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+/* Default hidden state for animations */
+.feature-item,
+.course-item,
+.testimonial,
+.faq-item {
+    opacity: 0;
+    transition: opacity 0.5s ease-in-out;
+}
+
+/* Trigger animations */
+.feature-item.animate {
+    animation: slideInLeft 1s ease-in-out;
+    opacity: 1;
+}
+
+.course-item.animate {
+    animation: slideInRight 1s ease-in-out;
+    opacity: 1;
+}
+
+.testimonial.animate {
+    animation: fadeIn 1.5s ease-in-out;
+    opacity: 1;
+}
+
+.faq-item.animate {
+    animation: slideInLeft 1s ease-in-out;
+    opacity: 1;
+}
-- 
cgit v1.2.3