Jak dodać takie transition jak na tej stronie.

Question

Cześć!

Buduję duplikat strony eduweb.pl ;p i zatrzymałęm się w miejscu  - https://youtu.be/HaKH13aW8MY

Chodzi mi o efekt takiego łagodnego przejścia. Do czego mam przypisać takie przejście. Nie mogę tego zrozumieć...

Używam czystego javascript-u i mój kod wygląda tak:

(function () {
    const wrapper = document.querySelector(".slider-inner");
    const btnPrev = document.querySelector(".btn-prev");
    const btnNext = document.querySelector(".btn-next");

    btnNext.addEventListener("click", () => {
        console.log("next");
        wrapper.scrollLeft += 280;
    });

    btnPrev.addEventListener("click", () => {
        console.log("prev");
        wrapper.scrollLeft -= 280;
    });
})();

 

Answer 1

Zamiast scrollLeft możesz użyć transform + translateX i wtedy efekt płynności uzyskać dodając transition. Możesz też skorzystać ze scroll-snap (video, dokumentacja).

Comments

Zastosowałem to rozwiązanie z translateX, ale coś nie działa, bo to zamiast przewinąć zawartość to ją przesunęło.. Może coś źle napisałem. Możecie sprawdzić?

(function () {
    const wrapper = document.querySelector(".slider-inner");
    const btnPrev = document.querySelector(".btn-prev");
    const btnNext = document.querySelector(".btn-next");

    btnNext.addEventListener("click", () => {
        console.log("next");
        // wrapper.scrollLeft += 280;
        wrapper.style.cssText =
            "transform: translateX(-280px); transition: .3s transform ease";
    });

    btnPrev.addEventListener("click", () => {
        console.log("prev");
        wrapper.scrollLeft -= 280;
    });
})();

 

---

Bo translateX przesuwa element, a nie go przewija. Ale wizualnie wychodzi praktycznie na to samo.

Możecie sprawdzić?

Żeby to sprawdzić potrzeba jeszcze kodu HTML i CSS (jeśli jakiś jest oprócz tego, który napisałeś w JS).

---

Troszkę mi to zajęło ale już działa, oczywiście można to udoskonalić ale...

btnNext.addEventListener("click", () => {
        steps += 100;

        courses.forEach((cours) => {
            cours.style.cssText =
                `transform: translateX(-${steps}px); transition: .3s transform ease`;
        });

    });

    btnPrev.addEventListener("click", () => {

        if (steps > 0) {
            steps -= 100;
        }
        courses.forEach((cours) => {
            cours.style.cssText =
                `transform: translateX(-${steps}px); transition: .3s transform ease`;
        });
    });
})();