Refactor 'neler-yapariz' Template and Introduce New Sections: Updated the 'neler-yapariz' template to enhance its structure by adding new sections for footer, hero, inertia, marquee, and scrolltrigger. Introduced external CSS and JS files for improved styling and functionality. This update aims to enhance user experience through better organization and dynamic content integration.

resources/views/templates/neler-yapariz/js/section-selector.js

@@ -0,0 +1,61 @@
+{
+  /** Section Selector   */
+const createObserver = (section, cb) => {
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting && entry.intersectionRatio >= 0.1) {
+        cb(entry.target);
+      }
+    });
+  }, {
+    threshold: 0.2 // This means the callback will fire when at least 10% is visible
+  });
+  observer.observe(section);
+};
+
+  addEventListener("GSAPReady", (event) => {
+    const { lenis } = event.detail;
+
+    const wrapper = document.querySelector("[data-animate='sectionselector']");
+    const items = [...wrapper.children];
+    const highlight = wrapper.querySelector("[data-selector='highlight']");
+    let currentIndex = 0;
+
+    const sections = [...document.querySelectorAll("section")];
+
+    sections.forEach((section, index) => {
+      createObserver(section, () => {
+        items[currentIndex].classList.remove("current");
+        currentIndex = index;
+        items[currentIndex].classList.add("current");
+        moveHighlightTo(index);
+      });
+    });
+
+let flipAnimation = null
+    const moveHighlightTo = (index) => {
+      const state = Flip.getState(highlight);
+      items[index].appendChild(highlight);
+
+	if (flipAnimation) flipAnimation.kill()
+	flipAnimation = Flip.from(state, {
+        duration: 0.5,
+        ease: "expo.out",
+      });
+    };
+
+    items.forEach((item, index) => {
+      item.addEventListener("click", () => {
+        lenis.scrollTo("#" + items[index].dataset.to);
+      });
+
+      item.addEventListener("mouseenter", () => {
+        moveHighlightTo(index);
+      });
+
+      item.addEventListener("mouseleave", () => {
+        moveHighlightTo(currentIndex);
+      });
+    });
+  });
+}