javascript - 如何将适用于滚动的 css 动画效果添加到仅特定的 div？

Question

这个想法是有 5 个名为 section1、section2 等的部分。
每个部分都有自己的图像。
当用户滚动时，图像应该通过改变不透明度来“淡出”和“淡入”，并且使用 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 + ")"});
            }
        });
    });

现在，这确实会在您滚动时创建不透明度变化的效果 - 问题是，它适用于滚动时的整个页面，但我希望只有当您用户在 ID 名为 section1 的 div 中/周围滚动时才会发生效果
我知道它适用于整个窗口，因为 .scroll 被应用于 jQuery(window)。我曾尝试使用 jQuery('#section1') 但如果我这样做什么都不会发生。
我曾尝试添加像 http://www.moxhe.com.au/ 所示的 transform3D 效果但我也在努力让它工作，只有当用户使用 bg 图像在特定 div 周围滚动时，向下滚动应该有一个小的减少和向上滚动的小增加。
长话短说，我需要制作与 http://www.moxhe.com.au/ 相同的 css 动画但是我正在努力将 css 效果应用到页面/div 的特定部分，并且 ID 应该是整个页面。

Answer 1

您可以尝试使用仅在特定滚动值处应用转换的条件来包装转换:

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