116 lines
3.0 KiB
JavaScript
116 lines
3.0 KiB
JavaScript
import $ from "jquery";
|
|
import { gsap } from "gsap";
|
|
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
|
import { initIntroAnimation } from "./introAnimation.js";
|
|
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
$(function () {
|
|
initIntroAnimation();
|
|
const $gnb = $("#gnb");
|
|
const $hamburger = $(".gnb__hamburger");
|
|
const $mobileNav = $(".gnb__mobileNav");
|
|
const $mobileNavClose = $(".gnb__mobileNavClose");
|
|
|
|
// 섹션 → nav 귀속 맵
|
|
const sectionToNav = {
|
|
intro: "intro",
|
|
about: "about",
|
|
history: "history",
|
|
vision: "vision",
|
|
project: "project",
|
|
contact: "contact",
|
|
};
|
|
|
|
// GNB 스크롤 배경
|
|
ScrollTrigger.create({
|
|
start: "40px top",
|
|
onEnter: () => $gnb.addClass("isScrolled"),
|
|
onLeaveBack: () => $gnb.removeClass("isScrolled"),
|
|
});
|
|
|
|
// 현재 섹션에 따라 GNB 활성화
|
|
const $navLinks = $(".gnb__navLink");
|
|
const sections = $("section[id]").toArray();
|
|
|
|
function setActiveNav(navId) {
|
|
$navLinks.each(function () {
|
|
const href = $(this).attr("href").replace("#", "");
|
|
$(this).toggleClass("isActive", href === navId);
|
|
});
|
|
}
|
|
|
|
function updateActiveNav() {
|
|
const scrollY = window.scrollY + window.innerHeight / 3;
|
|
let current = "";
|
|
|
|
sections.forEach((el) => {
|
|
if (el.offsetTop <= scrollY) {
|
|
current = sectionToNav[el.id] || current;
|
|
}
|
|
});
|
|
|
|
setActiveNav(current);
|
|
}
|
|
|
|
ScrollTrigger.create({
|
|
trigger: document.body,
|
|
start: "top top",
|
|
end: "max",
|
|
onUpdate: updateActiveNav,
|
|
});
|
|
|
|
updateActiveNav();
|
|
|
|
// 햄버거 메뉴
|
|
$hamburger.on("click", function () {
|
|
const isOpen = $hamburger.toggleClass("isOpen").hasClass("isOpen");
|
|
$hamburger.attr("aria-expanded", isOpen);
|
|
$mobileNav.toggleClass("isOpen", isOpen);
|
|
});
|
|
|
|
// 모바일 메뉴 링크 클릭 시 닫기
|
|
$(".gnb__mobileNavLink").on("click", function () {
|
|
$hamburger.removeClass("isOpen").attr("aria-expanded", false);
|
|
$mobileNav.removeClass("isOpen");
|
|
});
|
|
|
|
// 모바일 메뉴 닫기 버튼
|
|
$mobileNavClose.on("click", function () {
|
|
$hamburger.removeClass("isOpen").attr("aria-expanded", false);
|
|
$mobileNav.removeClass("isOpen");
|
|
});
|
|
|
|
// History 아코디언
|
|
$(".history__yearToggle").on("click", function () {
|
|
const $group = $(this).closest(".history__yearGroup");
|
|
const $list = $("#" + $(this).attr("aria-controls"));
|
|
const isOpen = $group.hasClass("isOpen");
|
|
|
|
$group.toggleClass("isOpen", !isOpen);
|
|
$(this).attr("aria-expanded", !isOpen);
|
|
|
|
if (isOpen) {
|
|
$list.attr("hidden", "");
|
|
} else {
|
|
$list.removeAttr("hidden");
|
|
}
|
|
});
|
|
|
|
// Contact 아코디언
|
|
$(".contactAccordion__header").on("click", function () {
|
|
const $item = $(this).closest(".contactAccordion__item");
|
|
const $body = $("#" + $(this).attr("aria-controls"));
|
|
const isOpen = $item.hasClass("isOpen");
|
|
|
|
$item.toggleClass("isOpen", !isOpen);
|
|
$(this).attr("aria-expanded", !isOpen);
|
|
|
|
if (isOpen) {
|
|
$body.attr("hidden", "");
|
|
} else {
|
|
$body.removeAttr("hidden");
|
|
}
|
|
});
|
|
});
|