如何将应用于滚动的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(窗口)。我尝试过使用jQuery('#section1')，但是如果我这样做，什么都不会发生。

我尝试添加了一个transform3D效果，如在http://www.moxhe.com.au/上显示，但我也在努力使它工作，应该有一个小的减少滚动向下滚动和小的增加滚动向上滚动，只有当用户在一个特定的div与bg图像滚动。

长话短说，我需要使css动画与http://www.moxhe.com.au/相同，但我很难将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

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()阻止它。