Simple Parallax effect – vanilla JavaSript

Ένα πολύ απλό Parallax effect με λίγες γραμμές JavaScript κώδικα.

const nb_parallaxs = document.querySelectorAll(".nb_parallax");
window.addEventListener("scroll", () => {
    for (element of nb_parallaxs) {
        let posX = element.dataset.rate_x ? window.pageYOffset * element.dataset.rate_x : 0;
        let posY = element.dataset.rate_y ? window.pageYOffset * element.dataset.rate_y : 0;
        element.style.transform = "translate3d(" + posX + "px," + posY + "px,0px)";
    }
});

Στο html element που θέλουμε να δημιουργήσουμε το parallax effect, δηλώνουμε:

• class=”nb_parallax”
• data-rate_x=”.1″ // ρυθμό μεταβολής
• data-rate_y=”-.3″ // ρυθμό μεταβολής

για παράδειγμα

<h1 class="nb_parallax" data-rate_x=".2" data-rate_y="-.3">Section Title parallax</h1>

Ο κώδικας του παραδείγματος βρίσκεται ανεβασμένος στον Github λογαριασμό μου.