scroll – Ninja Intranet

Ta funkcja wymaga użycia biblioteki gsap i pluginu scroll:

    wp_enqueue_script('gsap', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js', array(), '1.0', true);
    wp_enqueue_script('scrolltoplugin', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollToPlugin.min.js', array(), '1.0', true);



// Funkcja obsługująca animowany podjazd do kotwicy
function animowanyPodjazDoKotwicy() {
  // Znajdź wszystkie linki w nawigacji
  const nawigacjaLinki = document.querySelectorAll('nav a.wp-block-navigation-item__content');

  // Dla każdego znalezionego linka
  nawigacjaLinki.forEach(function (link) {
    // Dodaj nasłuchiwanie na zdarzenie kliknięcia
    link.addEventListener('click', function (e) {
      e.preventDefault();

      // Pobierz identyfikator elementu docelowego z atrybutu href
      const celId = this.getAttribute('href').substring(1);
      // Znajdź element docelowy po jego identyfikatorze
      const celElement = document.getElementById(celId);

      // Jeśli element docelowy istnieje
      if (celElement) {
        // Animuj przewijanie do elementu docelowego
        gsap.to(window, { duration: 0.5, scrollTo: { y: celElement.offsetTop - 140 } });
      }
    });

    // Dodaj obsługę zdarzenia dotknięcia (touch)
    link.addEventListener('touchstart', function (e) {
      // Zamknij menu mobilne, jeśli jest otwarte
      var menuMobilne = document.querySelector('.wp-block-navigation__responsive-container.is-menu-open');
      menuMobilne.classList.remove('is-menu-open');
      menuMobilne.classList.remove('has-modal-open');

      e.preventDefault();

      // Pobierz identyfikator elementu docelowego z atrybutu href
      const celId = this.getAttribute('href').substring(1);
      // Znajdź element docelowy po jego identyfikatorze
      const celElement = document.getElementById(celId);

      // Pobierz element odpowiedzialny za zamknięcie menu mobilnego
      var wyjscie = document.querySelector('.wp-block-navigation__responsive-container-close');
      // Wywołaj funkcję symulującą zdarzenie dotknięcia
      //triggerTouchEvent(wyjscie);

      // Jeśli element docelowy istnieje
      if (celElement) {
        // Animuj przewijanie do elementu docelowego
        gsap.to(window, { duration: 0.5, scrollTo: { y: celElement.offsetTop - 140 } });
      }
    });
  });
}

// Wywołaj funkcję obsługującą animowany podjazd do kotwicy
animowanyPodjazDoKotwicy();

function animowanyPodjazDoKotwicy(){
const nawigacjaLinki = document.querySelectorAll('nav a');

  nawigacjaLinki.forEach(function (link) {
    link.addEventListener('click', function (e) {
      e.preventDefault();

      const celId = this.getAttribute('href').substring(1);
      const celElement = document.getElementById(celId);

      if (celElement) {
        plynniePrzewinDo(celElement);
      }
    });
  });

  function plynniePrzewinDo(celElement) {
    const pozycjaPoczatkowa = window.pageYOffset;
    const pozycjaDocelowa = celElement.getBoundingClientRect().top + pozycjaPoczatkowa;
    const czasTrwania = 1000; // Czas trwania animacji w milisekundach
    const czasRozpoczecia = performance.now();

    function animuj(aktualnyCzas) {
      const uplyneloCzasu = aktualnyCzas - czasRozpoczecia;
      const postep = Math.min(uplyneloCzasu / czasTrwania, 1);

      window.scrollTo(0, pozycjaPoczatkowa + (pozycjaDocelowa - pozycjaPoczatkowa) * postep);

      if (postep < 1) {
        requestAnimationFrame(animuj);
      }
    }

    requestAnimationFrame(animuj);
  }
}
animowanyPodjazDoKotwicy();