https://yeyo.ai/assets/js/index.js

1
2
3
4const header = document.querySelector("header");
5window.addEventListener("scroll", function () {
6  const headerTop = document.querySelector("header");
7  if (window.scrollY > 0) {
8    headerTop.classList.add("moved");
9  } else {
10    headerTop.classList.remove("moved");
11  }
12});
13
14
15
16
17
18const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
19const savedTheme = localStorage.getItem("theme");
20
21const currentTheme = savedTheme || (prefersDark ? "dark" : "light");
22document.documentElement.setAttribute("data-theme", currentTheme);
23updateImages(currentTheme);
24
25function updateImages(theme) {
26  const images = document.querySelectorAll("img[data-light][data-dark]");
27  images.forEach(img => {
28    img.src = theme === "dark" ? img.dataset.dark : img.dataset.light;
29  });
30}
31
32// const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
33// const savedTheme = localStorage.getItem("theme");
34
35// const currentTheme = savedTheme || (prefersDark ? "dark" : "light");
36// setTheme(currentTheme);
37
38// function setTheme(theme) {
39//   document.documentElement.setAttribute("data-theme", theme);
40//   localStorage.setItem("theme", theme);
41//   updateImages(theme);
42// }
43
44// function updateImages(theme) {
45//   document.querySelectorAll("img[data-light][data-dark]").forEach(img => {
46//     img.src = theme === "dark" ? img.dataset.dark : img.dataset.light;
47//   });
48// }
49
50// document.querySelectorAll(".theme-btn").forEach(btn => {
51//   btn.addEventListener("click", () => {
52//     setTheme(btn.dataset.themeBtn);
53//   });
54// });
55
56
57
58
59
60document.addEventListener("DOMContentLoaded", () => {
61  const items = document.querySelectorAll(".animate-item");
62  if (!items.length) return;
63
64  const observer = new IntersectionObserver(
65    (entries) =>
66      entries.forEach((entry) => {
67        if (!entry.isIntersecting) return;
68
69        const index = [...items].indexOf(entry.target);
70        entry.target.style.transitionDelay = `${0.15}s`;
71        entry.target.classList.add("visible");
72
73        observer.unobserve(entry.target);
74      }),
75    { threshold: 0.1 }
76  );
77
78  items.forEach((item) => observer.observe(item));
79});
80
81
82
83
84document.addEventListener("DOMContentLoaded", () => {
85  const animatedItems = document.querySelectorAll(
86    ".fade-left, .fade-right, .fade-top, .fade-bottom"
87  );
88
89  const observer = new IntersectionObserver(
90    (entries) => {
91      entries.forEach((entry) => {
92        if (entry.isIntersecting) {
93          entry.target.classList.add("show");
94        } else {
95        
96        }
97      });
98    },
99    {
100      threshold: 0.15, 
101    }
102  );
103
104  animatedItems.forEach((item) => observer.observe(item));
105});
106
107
108document.querySelectorAll('.menu-list-link').forEach(link => {
109    link.addEventListener('click', function (e) {
110        e.preventDefault();
111        const targetId = this.getAttribute('href').substring(1);
112        const targetElement = document.getElementById(targetId);
113
114        if (targetElement) {
115            const headerHeight = document.querySelector('header').offsetHeight;
116            const targetPosition = targetElement.getBoundingClientRect().top + window.scrollY - headerHeight;
117
118            window.scrollTo({
119                top: targetPosition,
120                behavior: 'smooth'
121            });
122        }
123    });
124});
125
126
127const faqWrappers = document.querySelectorAll(".faq-item-wrapper");
128
129faqWrappers.forEach(wrapper => {
130  const item = wrapper.querySelector(".faq-item");
131  const icon = wrapper.querySelector(".faq-item-icon");
132
133  const toggle = () => {
134    const isActive = item.classList.contains("active");
135
136    faqWrappers.forEach(w => {
137      w.querySelector(".faq-item").classList.remove("active");
138      w.querySelector(".faq-item-icon").classList.remove("active");
139    });
140
141    if (!isActive) {
142      item.classList.add("active");
143      icon.classList.add("active");
144    }
145  };
146
147  item.addEventListener("click", toggle);
148  icon.addEventListener("click", toggle);
149});
150
151
152document.addEventListener("DOMContentLoaded", function () {
153  const containers = document.querySelectorAll(
154    ".hero-tags-items, .how-work-tags"
155  );
156
157  let speed = 0.5;
158

159  containers.forEach((container) => {
160    let animationId;
161    let position = 0;
162    let isRunning = false;
163
164    function startMarquee() {
165      if (window.innerWidth > 800 || isRunning) return;
166
167      isRunning = true;
168
169      const items = Array.from(container.children);
170
171      items.forEach((item) => {
172        const clone = item.cloneNode(true);
173        container.appendChild(clone);
174      });
175
176      function animate() {
177        position -= speed;
178
179        if (Math.abs(position) >= container.scrollWidth / 2) {
180          position = 0;
181        }
182
183        container.style.transform = `translateX(${position}px)`;
184        animationId = requestAnimationFrame(animate);
185      }
186
187      animate();
188    }
189
190    function stopMarquee() {
191      cancelAnimationFrame(animationId);
192      container.style.transform = "translateX(0)";
193      position = 0;
194      isRunning = false;
195    }
196
197    function checkScreen() {
198      stopMarquee();
199      if (window.innerWidth <= 800) {
200        startMarquee();
201      }
202    }
203
204    checkScreen();
205    window.addEventListener("resize", checkScreen);
206  });
207});
208
209