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为ID的div中/周围滚动时才发生效果第1

我知道它正在应用于整个窗口，因为.scroll正在应用于jQuery（窗口）。我曾尝试使用jQuery（'＃section1'），但如果执行此操作，则不会发生任何事情。

我曾尝试添加http://www.moxhe.com.au/所示的transform3D效果，但也在努力使其正常工作，只有当用户围绕特定div滚动时，才应有一个小的向下滚动滚动和一个小的向上滚动向上滚动bg图片。

长话短说，我需要使css动画与http://www.moxhe.com.au/相同，但是在将css效果应用于页面/ div的特定部分时遇到了麻烦，其ID应该与整个页面相同。

Answer 1

我摆弄着你的位置。我已经将#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()停止它。

Answer 2

您可以尝试使用仅将转换应用于特定滚动值的条件来包装转换：

.f = ~ f(b = .x), a = 1

如何添加仅应用于特定div的css动画效果？

2 个答案: