Как адаптировать анимации на js при уменьшении экрана?

Question

[Михаил Размыслович]

Здравствуйте! столкнулся с проблемой, что невозможно адаптировать анимации при уменьшении экрана, то есть выполняется первое условие

/* появление элементов при скроле секция 3 */
  window.addEventListener('scroll', function() {
    if(window.innerWidth >= 1331){
        /* 1 карточка */
        if(pageYOffset >= 900){
            document.querySelector('#section-third__card_1').classList.remove("section-3-card-position")
        } if(pageYOffset < 1020){
            document.querySelector('#section-third__card_1').classList.add("section-3-card-position")
        }
        /* 2 карточка */
        if(pageYOffset >= 1040){
            document.querySelector('#section-third__card_2').classList.remove("section-3-card-position")
        } if(pageYOffset < 1160){
            document.querySelector('#section-third__card_2').classList.add("section-3-card-position")
        }
        /* 3 карточка */
        if(pageYOffset >= 1180){
            document.querySelector('#section-third__card_3').classList.remove("section-3-card-position")
        } if(pageYOffset < 1300){
            document.querySelector('#section-third__card_3').classList.add("section-3-card-position")
        }
        /* 4 карточка */
        if(pageYOffset >= 1320){
            document.querySelector('#section-third__card_4').classList.remove("section-3-card-position")
        } if(pageYOffset < 1440){
            document.querySelector('#section-third__card_4').classList.add("section-3-card-position")
        }
    }
    if(window.innerWidth >= 1066 && window.innerWidth < 1331){
        /* 1 карточка */
        if(pageYOffset >= 750){
            document.querySelector('#section-third__card_1').classList.remove("section-3-card-position")
        } if(pageYOffset < 970){
            document.querySelector('#section-third__card_1').classList.add("section-3-card-position")
        }
        /* 2 карточка */
        if(pageYOffset >= 900){
            document.querySelector('#section-third__card_2').classList.remove("section-3-card-position")
        } if(pageYOffset < 1160){
            document.querySelector('#section-third__card_2').classList.add("section-3-card-position")
        }
        /* 3 карточка */
        if(pageYOffset >= 1180){
            document.querySelector('#section-third__card_3').classList.remove("section-3-card-position")
        } if(pageYOffset < 1300){
            document.querySelector('#section-third__card_3').classList.add("section-3-card-position")
        }
        /* 4 карточка */
        if(pageYOffset >= 1320){
            document.querySelector('#section-third__card_4').classList.remove("section-3-card-position")
        } if(pageYOffset < 1440){
            document.querySelector('#section-third__card_4').classList.add("section-3-card-position")
        }
    }
  });

Comments

[Kentavr16]

проверка сработает один раз при запуске кода. Чтобы отследить изменение размера нужно добавить листенер непосредственно на изменение размера вьюпорта - resize

[leeroyjenkins176]

Если в условиях указаны координаты начала и конца секций, то проще вместо всего этого кода использовать IntersectionObserver. Тогда и необходимость в event resize отпадет.

[Михаил Размыслович]

Kentavr16, а куда именно вставить это условие?

[Михаил Размыслович]

Kentavr16, Попробовал вот такой код, все равно не срабатывает

/* появление элементов при скроле секция 3 */
window.addEventListener('resize', function() {
    window.addEventListener('scroll', function() {
        if(window.innerWidth >= 1331){
            /* 1 карточка */
            if(pageYOffset >= 900){
                document.querySelector('#section-third__card_1').classList.remove("section-3-card-position")
            } if(pageYOffset < 1020){
                document.querySelector('#section-third__card_1').classList.add("section-3-card-position")
            }
            /* 2 карточка */
            if(pageYOffset >= 1040){
                document.querySelector('#section-third__card_2').classList.remove("section-3-card-position")
            } if(pageYOffset < 1160){
                document.querySelector('#section-third__card_2').classList.add("section-3-card-position")
            }
            /* 3 карточка */
            if(pageYOffset >= 1180){
                document.querySelector('#section-third__card_3').classList.remove("section-3-card-position")
            } if(pageYOffset < 1300){
                document.querySelector('#section-third__card_3').classList.add("section-3-card-position")
            }
            /* 4 карточка */
            if(pageYOffset >= 1320){
                document.querySelector('#section-third__card_4').classList.remove("section-3-card-position")
            } if(pageYOffset < 1440){
                document.querySelector('#section-third__card_4').classList.add("section-3-card-position")
            }
        }
        if(window.innerWidth >= 1066 && window.innerWidth < 1331){
            /* 1 карточка */
            if(pageYOffset >= 590){
                document.querySelector('#section-third__card_1').classList.remove("section-3-card-position")
            } if(pageYOffset < 970){
                document.querySelector('#section-third__card_1').classList.add("section-3-card-position")
            }
            /* 2 карточка */
            if(pageYOffset >= 900){
                document.querySelector('#section-third__card_2').classList.remove("section-3-card-position")
            } if(pageYOffset < 1160){
                document.querySelector('#section-third__card_2').classList.add("section-3-card-position")
            }
            /* 3 карточка */
            if(pageYOffset >= 1180){
                document.querySelector('#section-third__card_3').classList.remove("section-3-card-position")
            } if(pageYOffset < 1300){
                document.querySelector('#section-third__card_3').classList.add("section-3-card-position")
            }
            /* 4 карточка */
            if(pageYOffset >= 1320){
                document.querySelector('#section-third__card_4').classList.remove("section-3-card-position")
            } if(pageYOffset < 1440){
                document.querySelector('#section-third__card_4').classList.add("section-3-card-position")
            }
        }
    })
})