Change image and Text on Scroll (Javascript)

Question

I dont have much experience in javascript but trying to achieve a slideshow like in https://district2.studio/ where the text and image changes as you scroll. In the example no matter the amount you scroll at a time or inbetween the image changing animation, the image will change only once at a time. I'm trying to achieve this using javascript only and no additional plugin or libraries. Hope someone can help me.

Does this answer your question? [Active CSS animation only when you scroll on the view of the specific div](https://stackoverflow.com/questions/44664165/active-css-animation-only-when-you-scroll-on-the-view-of-the-specific-div) — Triby, Apr 16 '20 at 15:44

score 0 · Answer 1 · answered Apr 16 '20 at 17:04

You have some errors.

First of all, you have to wait the DOM is ready. You could movet he entire before de body tag closes to ensure that or use window.onload

class prop elements it's an array.

window.onload = function() {
    document.getElementById("image1").onscroll = function() {
        if(document.getElementById("image2").classList.contains("scroll")){
            document.getElementById("image2").classList.remove("scroll");
        } else {
            document.getElementById("image2").classList.add("scroll");
        }
    };
}

Something like this should work

Change image and Text on Scroll (Javascript)

1 Answers1