Animacje CSS na Scroll do Elementu: Płynne Przewijanie

Dodanie animacji CSS na scroll do elementów może uczynić Twoją stronę bardziej atrakcyjną i dynamiczną. Oto jak to zrobić.

JavaScript do Włączania Animacji

Najpierw potrzebujesz skryptu, który będzie włączał animacje podczas scrollowania.


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

Przykładowe CSS dla Animacji

Następnie, stwórz animację w CSS i zastosuj ją do elementów, które chcesz animować.

/****************  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*/
}

Dzięki tym prostym krokom, Twoje elementy będą płynnie wjeżdżać na ekran podczas przewijania strony.

Wróć