// Executa o código apenas quando a janela inteira, incluindo todos os recursos como imagens, estiver completamente carregada. window.addEventListener('load', function() { const $ = jQuery; const header = $('.vlt-header'); const menuContainer = $('.vlt-default-menu__navigation .sf-menu'); const anchors = ['Inicio', 'Post', 'Experiencia', 'Projects', 'Cursos', 'Missao', 'Contato']; let currentIndex = 0; // Função reutilizável para animar o scroll horizontal do menu para a âncora ativa. function scrollMenuTo(anchor) { // Sai da função se o menu não existir ou se não estivermos na visualização móvel. if (!menuContainer.length || $(window).width() > 991.98) return; const targetLink = menuContainer.find(`li[data-menuanchor="${anchor}"]`); // Verifica se o link alvo existe e se a sua posição pode ser calculada. if (targetLink.length && typeof targetLink.position === 'function') { let newScrollLeft = 0; // Se não for a primeira âncora, calcula a posição para centralizar o item. if (anchor !== 'Inicio') { const containerWidth = menuContainer.width(); const linkLeft = targetLink.position().left; const linkWidth = targetLink.outerWidth(); const currentScroll = menuContainer.scrollLeft(); // Cálculo preciso para centralizar o item de menu ativo newScrollLeft = currentScroll + linkLeft - (containerWidth / 2) + (linkWidth / 2); } // Anima o deslize do menu para a nova posição. // O .stop() previne que animações antigas se acumulem, garantindo um efeito suave. menuContainer.stop().animate({ scrollLeft: newScrollLeft }, 500); // Duração da animação de 500ms. } } // Função que configura e inicia a lógica de animação. function setupAnimations() { const targetNode = document.body; const config = { attributes: true, attributeFilter: ['class'] }; // Cria um observador que reage a mudanças de classe no , que são feitas pelo plugin pagePiling. const observer = new MutationObserver(function(mutationsList) { for (const mutation of mutationsList) { if (mutation.attributeName === 'class') { const viewingClass = Array.from(mutation.target.classList).find(c => c.startsWith('pp-viewing-')); if (viewingClass) { const anchor = viewingClass.split('-').pop(); const newIndex = anchors.indexOf(anchor); if (newIndex !== -1) { // 1. Anima o menu horizontal para a nova âncora. scrollMenuTo(anchor); // 2. Anima o deslize do cabeçalho com base na direção da rolagem. if (newIndex > currentIndex) { // Rolou para baixo header.addClass('is-hidden-left').removeClass('is-prep-right'); } else if (newIndex < currentIndex) { // Rolou para cima if (header.hasClass('is-hidden-left')) { header.addClass('is-prep-right'); void header[0].offsetWidth; // Força reflow do navegador. header.removeClass('is-hidden-left is-prep-right'); } } currentIndex = newIndex; // Atualiza o índice da secção atual. } } } } }); observer.observe(targetNode, config); // Garante que o menu está na posição correta assim que a página carrega. const initialViewingClass = Array.from(document.body.classList).find(c => c.startsWith('pp-viewing-')); if (initialViewingClass) { const initialAnchor = initialViewingClass.split('-').pop(); currentIndex = anchors.indexOf(initialAnchor); scrollMenuTo(initialAnchor); } } // Função que espera até que o plugin pagePiling do tema seja totalmente ativado. // Tenta verificar a cada 100ms. function waitForPagePiling() { const interval = setInterval(function() { // Quando a classe 'pp-enabled' é adicionada ao body, o plugin está pronto. if ($('body').hasClass('pp-enabled')) { clearInterval(interval); // Para de verificar. setupAnimations(); // Inicia a nossa lógica de animação. } }, 100); } waitForPagePiling(); });