122 lines
3.2 KiB
JavaScript
122 lines
3.2 KiB
JavaScript
// Show menu
|
|
const navMenu = document.getElementById("nav-menu");
|
|
const navToggle = document.getElementById("nav-toggle");
|
|
const navClose = document.getElementById("nav-close");
|
|
|
|
// Validate if const exists
|
|
|
|
if (navToggle) {
|
|
navToggle.addEventListener("click", () => {
|
|
navMenu.classList.add("show-menu");
|
|
});
|
|
}
|
|
|
|
//Menu hidden
|
|
// alidate if const exists
|
|
|
|
if (navClose) {
|
|
navClose.addEventListener("click", () => {
|
|
navMenu.classList.remove("show-menu");
|
|
});
|
|
}
|
|
|
|
// Remove menu mobile
|
|
const navLink = document.querySelectorAll(".nav-link");
|
|
|
|
const linkAction = () => {
|
|
const navMenu = document.getElementById("nav-menu");
|
|
|
|
navMenu.classList.remove("show-menu");
|
|
};
|
|
|
|
navLink.forEach((n) => n.addEventListener("click", linkAction));
|
|
|
|
// GSAP animation
|
|
gsap.from('.home-frame', 1.5, { opacity: 0, y: -300, delay: 0.2 });
|
|
gsap.from('.home-sphere', 1.5, { opacity: 0, x: -300, delay: 0.3 });
|
|
gsap.from('.home-triangle', 1.5, { opacity: 0, x: 300, delay: 0.6 });
|
|
gsap.from('.home-r', 1.5, { opacity: 0, y: -300, delay: 0.8 });
|
|
gsap.from('.home-l', 1.5, { opacity: 0, y: 300, delay: 0.8 });
|
|
// gsap.from('.about-title', 1.5, { opacity: 0, x: -100, delay: 1.3 });
|
|
gsap.from('.about-description', 1.5, { opacity: 0, x: -100, delay: 1.5 });
|
|
gsap.from('.button-ghost', 1.5, { opacity: 0, x: -100, delay: 1.6 });
|
|
gsap.from('.swiper', 1.5, { opacity: 0, x: 100, delay: 1.5 });
|
|
gsap.from('.section-title', 1.5, { opacity: 0, x: -100, delay: 1.5 });
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (window.innerWidth <= 766) {
|
|
gsap.from('.home-content', 1.5, { opacity: 0, y: -300, delay: 0.8 });
|
|
gsap.from('.home-title img', 1.5, { opacity: 0, x: 100, delay: 1.3 });
|
|
} else {
|
|
gsap.from('.home-content', 1.5, { opacity: 0, x: -300, delay: 0.8 });
|
|
gsap.from('.home-title img', 1.5, { opacity: 0, x: 300, delay: 1.2 });
|
|
}
|
|
|
|
const swiperAbout = new Swiper('.about-swiper', {
|
|
spaceBetween: 30,
|
|
centeredSlides: true,
|
|
loop: true,
|
|
autoplay: {
|
|
delay: 3500,
|
|
disableOnInteraction: false,
|
|
},
|
|
pagination: {
|
|
el: ".swiper-pagination",
|
|
dynamicBullets: true,
|
|
clickable: true
|
|
}
|
|
});
|
|
|
|
|
|
const bgHeader = () => {
|
|
const header = document.getElementById('header')
|
|
|
|
if (window.scrollY >= 50) {
|
|
header.classList.add('bg-header');
|
|
} else {
|
|
header.classList.remove('bg-header');
|
|
}
|
|
};
|
|
|
|
window.addEventListener('scroll', bgHeader);
|
|
|
|
|
|
const scrollUp = () => {
|
|
const scrollUp = document.getElementById('scroll-up')
|
|
|
|
if (window.scrollY >= 350) {
|
|
scrollUp.classList.add('show-scroll');
|
|
} else {
|
|
scrollUp.classList.remove('show-scroll');
|
|
}
|
|
}
|
|
|
|
window.addEventListener('scroll', scrollUp)
|
|
|
|
|
|
const sections = document.querySelectorAll('section[id]')
|
|
|
|
const scrollActive = () => {
|
|
const scrollDown = window.scrollY
|
|
|
|
sections.forEach(current => {
|
|
const sectionHeight = current.offsetHeight;
|
|
const sectionTop = current.offsetTop - 58;
|
|
const sectionId = current.getAttribute('id');
|
|
const sectionsClass = document.querySelector(`.nav-menu a[href*="${sectionId}"]`);
|
|
|
|
if (sectionsClass) {
|
|
if (scrollDown > sectionTop && scrollDown <= sectionTop + sectionHeight) {
|
|
sectionsClass.classList.add('active-link');
|
|
} else {
|
|
sectionsClass.classList.remove('active-link');
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
window.addEventListener('scroll', scrollActive) |