90 lines
2.5 KiB
JavaScript
90 lines
2.5 KiB
JavaScript
(() => {
|
|
// resources/js/header.js
|
|
function menuInit() {
|
|
let main_navigation = document.querySelector("#primary-menu");
|
|
const header = document.querySelector("#primary-header");
|
|
const primary_menu = header.querySelector("#primary-menu");
|
|
const burgerMenuToggle = header.querySelector("#burger-menu-toggle");
|
|
const submenuToggles = primary_menu.querySelectorAll(".menu-item-submenu-toggle");
|
|
burgerMenuToggle.addEventListener("click", function(e) {
|
|
e.preventDefault();
|
|
header.classList.toggle("nav-open");
|
|
burgerMenuToggle.toggleAttribute("aria-expanded");
|
|
gsap.from(primary_menu, {
|
|
opacity: 20,
|
|
y: "-100vh",
|
|
duration: 0.5,
|
|
ease: Power4.easeOut
|
|
});
|
|
});
|
|
document.addEventListener("focusin", (e) => {
|
|
const header2 = document.querySelector("#primary-header");
|
|
if (header2.classList.contains("nav-open") && !header2.contains(document.activeElement)) {
|
|
header2.classList.remove("nav-open");
|
|
burgerMenuToggle.setAttribute("aria-expanded", false);
|
|
burgerMenuToggle.focus();
|
|
}
|
|
}, true);
|
|
submenuToggles.forEach((button) => {
|
|
button.addEventListener("click", function(e) {
|
|
let isExpanded = button.getAttribute("aria-expanded") === "true";
|
|
button.setAttribute("aria-expanded", !isExpanded);
|
|
button.parentElement.querySelector(".sub-menu").classList.toggle("sub-menu-open");
|
|
});
|
|
});
|
|
}
|
|
|
|
// resources/js/app.js
|
|
window.addEventListener("load", function() {
|
|
menuInit();
|
|
gsap.to(".shape.square", {
|
|
scrollTrigger: {
|
|
trigger: ".branding",
|
|
start: "top bottom",
|
|
end: "bottom top",
|
|
markers: true,
|
|
scrub: 0.2
|
|
},
|
|
y: "300%",
|
|
duration: 2,
|
|
ease: "none"
|
|
});
|
|
gsap.to(".shape.circle", {
|
|
scrollTrigger: {
|
|
trigger: ".branding",
|
|
start: "top bottom",
|
|
end: "bottom top",
|
|
markers: true,
|
|
scrub: 0.4
|
|
},
|
|
y: "175%",
|
|
duration: 2,
|
|
ease: "none"
|
|
});
|
|
gsap.to(".shape.rectangle-rotated", {
|
|
scrollTrigger: {
|
|
trigger: ".branding",
|
|
start: "top bottom",
|
|
end: "bottom top",
|
|
markers: true,
|
|
scrub: 0.6
|
|
},
|
|
y: "340%",
|
|
duration: 2,
|
|
ease: "none"
|
|
});
|
|
gsap.to(".shape.rectangle-vertical", {
|
|
scrollTrigger: {
|
|
trigger: ".branding",
|
|
start: "top bottom",
|
|
end: "bottom top",
|
|
markers: true,
|
|
scrub: 0.3
|
|
},
|
|
y: "150%",
|
|
duration: 2,
|
|
ease: "none"
|
|
});
|
|
});
|
|
})();
|