如何将应用于滚动的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') 但如果我这样做什么也不会发生。我已经尝试添加一个 transform3D 效果，如http://www.moxhe.com.au/所示，但我也在努力让它工作，只有当用户四处滚动时，向下滚动应该有小幅减少，向上滚动应该有小幅增加带有 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

Answer 2

我做了一个小提琴来了解你在哪里。我已经将 into 包裹起来#section1并#section1_container应用于overflow: hidden它以限制动画的位置。

网页格式

<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()。