-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
102 lines (80 loc) · 2.59 KB
/
main.js
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
import "./css/index.css";
import Swiper from "swiper";
import ScrollReveal from "scrollreveal";
// mobile nav
const mobileNav = document.querySelector(".mnav");
const closeBtn = document.querySelector(".mnav__close-btn");
const closeBtnIcon = document.querySelector(".mnav__close-btn-icon");
const navOpenedClass = "left-0";
const navClosedClass = "-left-[300px]";
const arrowLeftClass = "ri-arrow-left-s-line";
const arrowRightClass = "ri-arrow-right-s-line";
closeBtn.addEventListener("click", () => {
mobileNav.classList.toggle(navClosedClass);
mobileNav.classList.toggle(navOpenedClass);
closeBtnIcon.classList.toggle(arrowLeftClass);
closeBtnIcon.classList.toggle(arrowRightClass);
});
// swiper
const swiper = new Swiper(".swiper", {
// Optional parameters
loop: true,
// If we need pagination
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
// faq
const faqItems = document.querySelectorAll(".faq__item");
faqItems.forEach((item) => {
const faqBtn = item.querySelector(".faq__btn");
item.addEventListener("click", () => {
const isOpen = item.classList.toggle("open");
const iconClass = isOpen ? "ri-subtract-fill" : "ri-add-fill";
const iconElement = faqBtn.querySelector("i");
iconElement.classList = `${iconClass} text-2xl`;
});
});
// scroll
const sr = ScrollReveal({
origin: "bottom",
distance: "60px",
duration: 2000,
delay: 600,
// reset:true
});
// hero
sr.reveal(".hero__text", { origin: "top" });
sr.reveal(".hero__img");
// stats
sr.reveal(".stats__item", { delay: 600, distance: "100px", interval: 100, origin: "top" });
// services
sr.reveal(".services");
sr.reveal(".services__top");
sr.reveal(".services__item", { delay: 600, distance: "100px", interval: 100, origin: "bottom" });
// appointment
sr.reveal(".appointment__title");
sr.reveal(".appointment__form");
// testimonials
sr.reveal(".testimonial");
sr.reveal(".testimonial__container");
// team
sr.reveal(".team__title");
sr.reveal(".team__slider");
// faq
sr.reveal(".faq__title");
sr.reveal(".faq__item", { delay: 600, distance: "100px", interval: 100, origin: "bottom" });
// departments
sr.reveal(".departments__bg");
sr.reveal(".departments__container");
// blog
sr.reveal(".blog__title");
sr.reveal(".blog__post", { delay: 600, distance: "100px", interval: 100, origin: "bottom" });
// brands
sr.reveal(".brands__logo", { delay: 600, distance: "100px", interval: 100, origin: "bottom" });
// newsletter
sr.reveal(".newsletter");
sr.reveal(".newsletter__container");
// footer
sr.reveal(".footer__item", { delay: 600, distance: "100px", interval: 100, origin: "bottom" });