Miesiąc: listopad 2023

Opublikowane w

Animowany podjazd / scroll do dotwicy js. działający na mobile dla block editor theme

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();
Opublikowane w

Animacje CSS na scoll do elementu płynne przewijanie


// Nadaj klase na scoll to do animacji elementów

function odslonElementy() {
    var odslaniane = document.querySelectorAll(".animowane");

    for (var i = 0; i < odslaniane.length; i++) {
        var windowHeight = window.innerHeight;
        var elementTop = odslaniane[i].getBoundingClientRect().top;
        var elementVisible = 150;

        if (elementTop < windowHeight - elementVisible) {
            odslaniane[i].classList.add("anim-ctive");
        } else {
            odslaniane[i].classList.remove("anim-active");
        }
    }
}

window.addEventListener("scroll", odslonElementy);

przykladowe css:

/****************  animka fotek ****************/


@keyframes wjazdfoty {
    
  0% {transform: scale(1.5); opacity: 0;}
  100% {transform: scale(1); opacity: 1;}
}

/* obrazki w tresci*/


.obrazek-w-tresci img {
    border-radius: 15px;
    box-shadow: #0000006b 4px 7px 4px;

    /* na start animacji*/

    opacity: 0; /*- stan początkowy okryte*/


}

.obrazek-w-tresci.anim-ctive img{
    animation: wjazdfoty 0.4s ease-out;
    animation-fill-mode: forwards; /*parametr forwads istotny by animacja zatrzymała się na ostatniej klatce*/
}
Opublikowane w

Animowany podjazd / scroll do dotwicy js.

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();