中文版jQuery页面滚动动画

1. 引入 jQuery 库和动画库，例如 animate.css。

2. 编写 HTML 结构，包含需要添加动画效果的元素。

3. 使用 jQuery 绑定滚动事件，通过判断滚动高度触发动画效果。

示例代码：

HTML 结构：

<div class="section" id="section1">
  <h1 class="animated fadeInUp">第一部分</h1>
  <p class="animated fadeInLeft">这里是第一段文字</p>
</div>
<div class="section" id="section2">
  <h1 class="animated fadeInUp">第二部分</h1>
  <p class="animated fadeInLeft">这里是第二段文字</p>
</div>

CSS：

.section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

JavaScript：

$(window).on('scroll', function() {
  $('h1, p').each(function(index, element) {
    if ($(element).offset().top < $(window).scrollTop() + $(window).height() - $(element).height()) {
      $(element).addClass('animated fadeInUp');
    }
  });
});

这段代码会监听滚动事件，当元素距离顶部的位置小于当前滚动高度加上窗口高度减去元素高度时，就会添加对应的动画类名（fadeInUp）。通过 CSS 运用 animate.css 动画库来实现动画效果。