利用jquery制作滚动到指定位置触发动画

介绍

利用jQuery制作“滚动到指定位置触发动画”可以为网站增添一份优雅。本攻略将介绍如何利用jQuery添加让元素滚动到指定位置时触发动画的代码。

步骤

步骤 1：添加jQuery链接

首先需要在 HTML 文件中添加 jQuery 链接。这里我们使用的是来自 jQuery 官网的链接：

<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
  crossorigin="anonymous">
</script>

步骤 2：准备要触发动画的元素

接下来需要准备要触发动画的元素，此处以一个 div 元素为例：

<div class="animate-me" style="opacity: 0;">我是要触发动画的元素</div>

在这里，我们增加了一个 animate-me 的 class，并设置了透明度为 0。

步骤 3：添加滚动事件监听

然后需要添加一个滚动事件监听，监听滚动事件并在滚动时触发动画。代码如下：

$(window).scroll(function() {
  const el = $(".animate-me");
  if (el.length) {
    const top_of_element = el.offset().top;
    const bottom_of_element = el.offset().top + el.outerHeight();
    const bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
    const top_of_screen = $(window).scrollTop();

    if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
      el.animate({"opacity": "1"}, 1000);
    }
  }
});

首先轻松地设置了元素的引用，然后获取元素的顶部和底部位置以及屏幕的顶部和底部位置。如果元素在屏幕内，则触发动画使其透明度为 1。

此处使用了 "animate" 方法，用于创建自定义动画，可以改变 CSS 属性的值。在这里我们将 opacity 属性的值从 0 动画到 1，动画时间为 1 秒。

示例 1：进入视图区域后动画触发

接下来提供一个示例，当元素进入视区时触发。

<div class="animate-me" style="opacity: 0;">我是要触发动画的元素</div>

<script>
  $(window).scroll(function(){
    $('.animate-me').each(function(){
      const elemPos = $(this).offset().top; // 元素相对于文档顶部的位置
      const scrollPos = $(window).scrollTop(); // 滚动条相对于文档顶部的位置
      const windowHeight = $(window).height(); // 浏览器窗口高度
      if (scrollPos > elemPos - windowHeight * 0.8) {
        $(this).addClass('animate');
      }
    });
  });
</script>

<style>
  .animate {
    opacity: 1;
    transform: translateY(0);
  }
  .animate-me {
    opacity: 0;
    transform: translateY(20px);
  }
</style>

正常情况下，该元素是不可见的。随着滚动条的移动，当元素底部到达屏幕的 80% 时，就会触发动画，元素变得可见。

示例 2：在指定位置上触发动画

再提供一个示例，当元素滚动到固定位置时触发。

<div class="animate-me" data-position="100" style="opacity: 0;">我是要触发动画的元素</div>

<script>
  $(window).scroll(function() {
    $('.animate-me').each(function() {
      const pos = $(this).data('position'); // 元素固定位置
      if($(window).scrollTop() > pos) {
        $(this).addClass('animate');
      }
    });
  });
</script>

<style>
  .animate-me {
    opacity: 0;
    transform: translateY(-100px);
  }
  .animate {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.3s ease-in-out;
  }
</style>

在这个例子中，使用了 HTML5 自定义 data- 属性，添加了一个 data-position 属性来设置元素触发动画的位置。当滚动条位置到达该位置时，就会触发动画。

总结

本攻略介绍了如何利用 jQuery 让元素滚动到指定位置时触发动画，通过同样的原理和不同的动画效果，我们可以为网站添加更多更好看的互动效果。