1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
// 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");
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);
});
// FAQ Section Toggle
const faqItems = document.querySelectorAll(".faq-item");
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
}
});
});
// Scroll-to-Top Button
const scrollToTopButton = document.getElementById("scroll-to-top");
const handleScrollButtonVisibility = () => {
scrollToTopButton.style.display = window.scrollY > 100 ? "block" : "none";
};
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();
|
