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

【问题标题】：How to add css animation effects that apply on scroll to only specific divs?如何将仅适用于滚动的css动画效果添加到特定的div？
【发布时间】：2020-11-22 04:46:33
【问题描述】：

这个想法是有 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 命名的 div 中/周围滚动时发生第 1 节

我知道它应用于整个窗口，因为 .scroll 被应用于 jQuery(window)。我尝试过使用 jQuery('#section1')，但如果我这样做，什么也不会发生。

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

长话短说，我需要制作与 http://www.moxhe.com.au/ 相同的 css 动画，但我正在努力将 css 效果应用于页面/div 的特定部分，其 ID 应该是整个页面。

【问题讨论】：

标签： javascript html jquery css

【解决方案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() 停止它。

【讨论】：

【解决方案2】：

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

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

【讨论】：