https://www.hosteur.com/src/templates/test/js/main.js

1// Description: Main JS file for the template
2// Author: Boudhraa Dhiaeddine
3$(document).ready(function () {
4  // Cached jQuery objects
5  const owlElement = $(".owl-2");
6  const hwsNavItem = $(".hws-nav-item");
7  const hbsNavItem = $(".hbs-nav-item");
8  const bgImage = $("#bg-image");
9  const textContent = $(".text-content");
10  const textDesc = $(".text-desc");
11  const textTitle = $(".eco-title");
12  const trustBtn = $("#trust-btn");
13  const leftText = $(".left-text");
14  const rightText = $(".right-text");
15  const title = $(".nav-title");
16  const nextSection = $("#next-section");
17  const header = $(".header");
18
19  // Reusable variables
20  const screenWidth = $(window).width();
21  const translateY = screenWidth > 1099 && screenWidth < 1400 ? 10 : 25;
22  const scrollUp = screenWidth > 1200 && screenWidth < 1400 ? 1750 : 2000;
23  const scrollDown = screenWidth > 1200 && screenWidth < 1400 ? 2200 : 2800;
24
25  // Initialize owl carousel if owlElement exists
26  if (owlElement.length > 0) {
27      owlElement.owlCarousel({
28        center: true,
29        items: 0,
30        loop: true,
31        stagePadding: 0,
32        margin: 20,
33        smartSpeed: 1000,
34        autoWidth: true,
35        width: 200,
36        nav: false,
37        autoplay: true,
38        autoplayTimeout: 3000,
39        dots: true,
40        clone: false,
41        pauseOnHover: false,
42        responsive: {
43          0: { items: 1, margin: 10 },
44          768: { items: 2, margin: 10 },
45          1024: { items: 3, margin: 10 },
46        },
47      });
48    }
49  // Function to show menu items
50  function showMenuItems(element) {
51    const listItems = element.find(".main-nav-list li");
52    let delay = 0;
53    listItems.each(function (index, item) {
54      setTimeout(() => {
55        $(item).css({ opacity: 1, color: "#D99374" });
56      }, delay);
57      delay += 200;
58    });
59  }
60
61  // Function to hide menu items
62  function hideMenuItems(element) {
63    element.find(".main-nav-list li").css({ opacity: 0 });
64  }
65
66  // Attach event listeners
67  hwsNavItem.on("mouseenter", () => {
68    hideMenuItems(hbsNavItem);
69    showMenuItems(hwsNavItem);
70  });
71
72  hbsNavItem.on("mouseenter", () => {
73    hideMenuItems(hwsNavItem);
74    showMenuItems(hbsNavItem);
75  });
76
77  // Throttle scroll event
78  let lastScrollPosition = 0;
79  let scrollTimer = null;
80  $(window).on("scroll", function () {
81    lastScrollPosition = window.scrollY;
82    if (scrollTimer !== null) {
83      clearTimeout(scrollTimer);
84    }
85    scrollTimer = setTimeout(() => {
86      // Handle scroll-based transformations
87      const distance = lastScrollPosition * 0.39;
88      leftText.css({ transform: `translateX(${-distance}px)` });
89      rightText.css({ transform: `translateX(${distance}px)` });
90    }, 100);
91  });
92
93  // Handle mouse wheel event
94  let unit = 32, dimension = 65, imageScale = 1;
95  window.addEventListener("wheel", handleMouseWheel);
96
97  async function handleMouseWheel(event) {
98      const scrollPosition = await getScrollPosition();
99      console.log(scrollPosition);
100      if (
101        scrollPosition >= scrollUp &&
102        scrollPosition <= scrollDown &&
103        !hasReachedSection
104      ) {
105        hasReachedSection = true;
106      } else if (
107        scrollPosition > scrollUp + 1000 ||
108        scrollPosition < scrollDown - 1500
109      ) {
110        // -- old +500 -1000
111        hasReachedSection = false;
112        document.body.classList.remove("stop-scrolling");
113      }
114
115      if (event.deltaY < 0) {
116        if (hasReachedSection && unit >= 30) {
117          document.body.classList.add("stop-scrolling");
118          unit -= 15;
119          dimension -= 7;
120          bgImage.css({
121            clipPath: `circle(${unit}% at 47% 50%)`,
122            width: `${dimension}%`,
123            height: `${dimension}vh`,
124            transform: `scale(${(imageScale -= 0.01)})`,
125          });
126
127          if (unit <= 50) {
128            textTitle.removeClass("white-color");
129          }
130          if (unit <= 35 || dimension <= 60) {
131            bgImage.css({
132              clipPath: `circle(${30}% at 47% 50%)`,
133              width: `${60}%`,
134              height: `${60}vh`,
135            });
136            textContent.css({
137              opacity: 1,
138              transform: `translateX(0) translateY(-${translateY}%)`,
139            });
140            document.body.classList.remove("stop-scrolling");
141            textDesc.css({ opacity: 0 });
142            trustBtn.css({ opacity: 0 });
143            hasReachedSection = false;
144          }
145        }
146      } else if (event.deltaY > 0) {
147        if (hasReachedSection && unit <= 100) {
148          document.body.classList.add("stop-scrolling");
149          unit += 15;
150          dimension += 7;
151          bgImage.css({
152            clipPath: `circle(${unit}% at 47% 50%)`,
153            width: `${dimension}%`,
154            height: `${dimension}vh`,
155            transform: `scale(${(imageScale += 0.01)})`,
156          });
157
158          if (unit >= 55 || dimension >= 100) {
159            bgImage.css({
160              clipPath: `circle(${100}% at 47% 60%)`,
161              width: `${100}%`,
162              height: `${100}vh`,
163            });
164            textContent.css({
165              opacity: 1,
166              transform: `translateX(0) translateY(-${translateY}%)`,
167            });
168            document.body.classList.remove("stop-scrolling");
169            textDesc.addClass("white-color");
170            textTitle.addClass("white-color");
171            textDesc.css({ opacity: 1 });
172            trustBtn.css({ opacity: 1 });
173            hasReachedSection = false;
174          }
175        }
176      }
177    }
178
179  // Helper function to get scroll position
180  function getScrollPosition() {
181    return new Promise((resolve) => {
182      window.requestAnimationFrame(() => {
183        resolve(window.scrollY);
184      });
185    });

186  }
187});
188