Как добавить эффекты анимации css, которые применяются при прокрутке, только к указанным c div?

Question

Идея состоит в том, что есть 5 разделов с именами section1, section2 и т. Д. c.

Каждый раздел имеет свое собственное изображение.

Когда пользователь прокручивает, изображение должно «исчезнуть» и in путем изменения непрозрачности, и есть небольшой эффект увеличения / уменьшения с помощью transform3D.

Я пытаюсь получить результаты, идентичные этому:

http://www.moxhe.com.au/

Моя попытка начать что-то такова

  jQuery(document).ready(function() {
        jQuery(window).scroll(function(event) {
            let scroll = jQuery(this).scrollTop();
            let opacity = 1 - (scroll / 1000);
            var x = (scroll / 100);
            if (opacity >= 0) {
                jQuery('#section1').css({'opacity': opacity , 'transform': "scale(" + x + "," + x + ")"});
            }
        });
    });

Теперь это действительно приводит к изменению непрозрачности при прокрутке - проблема в том, что это относится ко всей странице при прокрутке , но я хочу, чтобы эффекты происходили только тогда, когда пользователь прокручивает / вокруг div с идентификатором с именем section1

Я знаю, что это применяется ко всему окну, потому что .scroll применяется к jQuery ( окно). Я пробовал использовать jQuery ('# section1'), но если я это сделаю, ничего не произойдет.

Я попытался добавить эффект transform3D, как показано на http://www.moxhe.com.au/, но я пытаюсь заставить его работать, должно быть небольшое уменьшение прокрутки вниз и небольшое увеличение прокрутки вверх ТОЛЬКО если пользователь прокручивает определенный c div с изображением bg.

Короче говоря, мне нужно сделать css анимации идентичны http://www.moxhe.com.au/, но я пытаюсь применить эффекты css к определенной c части страницы / div с идентификатором, как предполагалось для всей страницы.

Answer 1

Вы можете попробовать обернуть преобразование условием, которое применяет преобразование только при определенных c значениях прокрутки:

var sectionHeight = $('.section').height();
if(document.documentElement.scrollTop>0 && document.documentElement.scrollTop<sectionHeight){
    //apply transformation here
}
else if(document.documentElement.scrollTop>sectionHeight && document.documentElement.scrollTop<(sectionHeight*2)){
    //apply transformation here
}
...
//Number of if conditions = number of sections you have

Answer 2

Я сделал скрипку, чтобы понять, где вы находитесь. Я обернул #section1 в #section1_container и применил к нему overflow: hidden, чтобы ограничить место для анимации.

html

<div id="section1_container">
<div id="section1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque sapiente dolor ex magnam eveniet! Ipsum officia quidem possimus iste expedita temporibus nobis praesentiumconsectetur adipisicing elit. Doloremque sapiente dolor ex magnam eveniet! Ipsu
</div>
</div>

css

#section1_container{
  overflow: hidden;
}

Я думаю, вы также хотите запустить анимацию там, где виден раздел или что-то в этом роде.

, так что у вас есть $("#section1_container").offset().top, который даст вам смещение от верха документа, и если это свойство выше, чем ваше scroll = jQuery(this).scrollTop();, вы можете начать анимацию. Вы можете остановить это, набрав $("#section1_container").height().