MediaWiki:Common.js: mudanças entre as edições

De Farmland
Ir para navegação Ir para pesquisar
Sem resumo de edição
Etiqueta: Revertido
Sem resumo de edição
Etiqueta: Revertido
Linha 2: Linha 2:
   CARROSSEL UNIFICADO - WIKI EVERLIGHT
   CARROSSEL UNIFICADO - WIKI EVERLIGHT
   ======================================================= */
   ======================================================= */
mw.loader.using(['jquery', 'mediawiki.util'], function () {
/* Certifique-se de que as bibliotecas GSAP e Lenis estão carregadas na sua Wiki */
    $(function() {
document.addEventListener('DOMContentLoaded', () => {
        const $wrapper = $('.carousel-wrapper');
  // 1. Smooth Scroll (Lenis)
        const $items = $('.carousel-item');
  const lenis = new Lenis();
        const $next = $('.right-btn');
  function raf(time) {
        const $prev = $('.left-btn');
    lenis.raf(time);
       
    requestAnimationFrame(raf);
        if (!$wrapper.length) return; // Só executa se o carrossel existir na página
  }
  requestAnimationFrame(raf);


        let current = 0;
  // 2. Efeito de rotação da Seção 2 (A imagem que "levanta")
        let autoPlayTimer;
  gsap.to('.image-motion', {
    transform: 'rotatex(0deg)',
    scrollTrigger: {
      trigger: '.section2',
      start: 'top bottom',
      end: 'bottom top',
      scrub: true
    }
  });


        function updateCarousel() {
  // 3. Animação de entrada dos cards na Seção 3
            // Atualiza a classe ativa para o efeito visual de destaque
  gsap.from('.wiki-carousel-item', {
            $items.removeClass('active').eq(current).addClass('active');
    opacity: 0,
 
    y: 50,
            const activeItem = $items.get(current);
    stagger: 0.1,
            const scrollPosition =
    duration: 0.8,
                activeItem.offsetLeft -
    scrollTrigger: {
                ($wrapper.width() / 2) +
      trigger: '.wiki-loop-container',
                ($(activeItem).outerWidth() / 2);
      start: 'top 80%'
 
    }
            $wrapper.stop().animate({
  });
                scrollLeft: scrollPosition
            }, 500);
        }
 
        // Funções de Navegação
        function moveNext() {
            current = (current + 1) % $items.length;
            updateCarousel();
        }
 
        function movePrev() {
            current = (current - 1 + $items.length) % $items.length;
            updateCarousel();
        }
 
        // Eventos de Clique
        $next.on('click', function() {
            stopAutoPlay();
            moveNext();
        });
 
        $prev.on('click', function() {
            stopAutoPlay();
            movePrev();
        });
 
        // Auto-Play (4 segundos)
        function startAutoPlay() {
            autoPlayTimer = setInterval(moveNext, 4000);
        }
 
        function stopAutoPlay() {
            clearInterval(autoPlayTimer);
        }
 
        // Inicialização
        updateCarousel();
        startAutoPlay();
 
        // Pausa o carrossel se o mouse estiver em cima
        $wrapper.hover(stopAutoPlay, startAutoPlay);
    });
});
});


/* =======================================================
/* =======================================================
Linha 90: Linha 56:
         });
         });
     });
     });
});
document.querySelectorAll('.carousel-track').forEach(track => {
  track.addEventListener('mouseenter', () => {
    track.querySelectorAll('.carousel-item').forEach(item => {
      item.style.animationPlayState = 'paused';
    });
  });
  track.addEventListener('mouseleave', () => {
    track.querySelectorAll('.carousel-item').forEach(item => {
      item.style.animationPlayState = 'running';
    });
  });
});
document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll('.carousel-track').forEach(track => {
    track.addEventListener('mouseenter', () => {
      track.querySelectorAll('.carousel-item').forEach(item => {
        item.style.animationPlayState = 'paused';
      });
    });
    track.addEventListener('mouseleave', () => {
      track.querySelectorAll('.carousel-item').forEach(item => {
        item.style.animationPlayState = 'running';
      });
    });
  });
});
});

Edição das 12h57min de 21 de janeiro de 2026

/* =======================================================
   CARROSSEL UNIFICADO - WIKI EVERLIGHT
   ======================================================= */
/* Certifique-se de que as bibliotecas GSAP e Lenis estão carregadas na sua Wiki */
document.addEventListener('DOMContentLoaded', () => {
  // 1. Smooth Scroll (Lenis)
  const lenis = new Lenis();
  function raf(time) {
    lenis.raf(time);
    requestAnimationFrame(raf);
  }
  requestAnimationFrame(raf);

  // 2. Efeito de rotação da Seção 2 (A imagem que "levanta")
  gsap.to('.image-motion', {
    transform: 'rotatex(0deg)',
    scrollTrigger: {
      trigger: '.section2',
      start: 'top bottom',
      end: 'bottom top',
      scrub: true
    }
  });

  // 3. Animação de entrada dos cards na Seção 3
  gsap.from('.wiki-carousel-item', {
    opacity: 0,
    y: 50,
    stagger: 0.1,
    duration: 0.8,
    scrollTrigger: {
      trigger: '.wiki-loop-container',
      start: 'top 80%'
    }
  });
});

/* =======================================================
   ARVORE HABILIDADE - WIKI EVERLIGHT
   ======================================================= */


document.addEventListener('DOMContentLoaded', () => {
    const cards = document.querySelectorAll('.skill-card');

    cards.forEach(card => {
        card.addEventListener('click', () => {
            const skillName = card.querySelector('.skill-name').innerText;
            console.log(`Habilidade clicada: ${skillName}`);
            
            // Exemplo de efeito visual simples
            card.style.filter = "brightness(1.2)";
            setTimeout(() => {
                card.style.filter = "brightness(1)";
            }, 150);
        });
    });
});