Ümit Tunç
93 lines
2.9 KiB
JavaScript
93 lines
2.9 KiB
JavaScript
{
|
||
/** 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")];
|
||
|
||
// Navigation height'ini hesapla (logo height'i ve üst/alt boşluklar için)
|
||
const navWrapper = document.querySelector("[data-module='nav']");
|
||
const navElement = navWrapper?.querySelector(".nav");
|
||
const logoElement = navWrapper?.querySelector(".logo-banner-w");
|
||
const getNavHeight = () => {
|
||
if (navWrapper && navElement) {
|
||
// Navigation element'inin toplam height'ini al (padding dahil)
|
||
const navHeight = navElement.offsetHeight;
|
||
|
||
// Logo element'inin üstündeki boşluğu hesapla
|
||
if (logoElement) {
|
||
const logoRect = logoElement.getBoundingClientRect();
|
||
const navRect = navElement.getBoundingClientRect();
|
||
const topSpace = logoRect.top - navRect.top;
|
||
|
||
// Logo height'i + üstündeki boşluk + altındaki boşluk
|
||
return navHeight + topSpace;
|
||
}
|
||
|
||
return navHeight;
|
||
}
|
||
return 0;
|
||
};
|
||
|
||
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", () => {
|
||
const targetSection = document.getElementById(items[index].dataset.to);
|
||
if (targetSection) {
|
||
const navHeight = getNavHeight();
|
||
lenis.scrollTo(targetSection, {
|
||
offset: -navHeight
|
||
});
|
||
} else {
|
||
lenis.scrollTo("#" + items[index].dataset.to);
|
||
}
|
||
});
|
||
|
||
item.addEventListener("mouseenter", () => {
|
||
moveHighlightTo(index);
|
||
});
|
||
|
||
item.addEventListener("mouseleave", () => {
|
||
moveHighlightTo(currentIndex);
|
||
});
|
||
});
|
||
});
|
||
} |