如何在页面滚动到指定元素时触发JS入场动画效果

我完全懂你的需求啦——现在气泡动画是页面一加载就直接触发，你想要改成只有当滚动到那个服务板块（就是带id="loadonscroll"的.my_info容器）时，才显示这个旋转+淡入的入场效果对吧？这其实很好实现，咱们只需要做这几步：

• 把你原来的动画逻辑封装成一个独立函数，方便调用
• 写一个判断元素是否进入视口的工具函数
• 监听页面滚动事件，每次滚动时检查目标元素是否出现在视口中，如果是且动画还没执行过，就触发动画
• 页面加载完成后先做一次检查，防止目标元素一开始就在视口（比如页面比较短的情况）

下面是修改后的完整代码，我给你标了关键改动的地方：

修改后的JavaScript代码 #

$(document).ready(function() {
  // 标记动画是否已经执行过，避免重复触发
  let animationTriggered = false;
  // 目标元素：就是你要滚动到的那个板块
  const targetSection = $('#loadonscroll');
  const bubbleList = $('.bubble-container');
  const bubbleCount = bubbleList.length;
  const degStep = 180 / (bubbleCount - 1);

  // 1. 把原来的动画逻辑封装成函数
  function initBubbles() {
    $('.bubble-container').each((index) => {
      const deg = index * degStep;
      const invertDeg = deg * -1;
      $(bubbleList[index]).css('transform', `rotate(${deg}deg)`);
      $(bubbleList[index]).css('opacity', `1`);
      $(bubbleList[index]).find('.bubble').css('transform', `rotate(${invertDeg}deg)`);
    });
  }

  // 2. 判断元素是否进入视口的工具函数
  function isElementInViewport(el) {
    const rect = el[0].getBoundingClientRect();
    return (
      rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.bottom >= 0
    );
  }

  // 3. 滚动监听函数
  function checkScroll() {
    if (!animationTriggered && isElementInViewport(targetSection)) {
      initBubbles();
      animationTriggered = true;
      // 动画触发后可以解绑滚动事件，优化性能
      $(window).off('scroll', checkScroll);
    }
  }

  // 4. 页面加载时先检查一次，防止元素一开始就在视口
  checkScroll();
  // 绑定滚动事件
  $(window).on('scroll', checkScroll);
});

HTML和CSS部分 #

你的HTML和CSS代码不需要改动，保持原来的样子就好——原来的.bubble-container已经设置了transition: transform ease-in 0.7s, opacity ease 1s;，刚好能配合JS的样式修改实现平滑的入场动画。

简单解释下关键逻辑 #

• animationTriggered变量用来标记动画是否已经执行过，避免用户来回滚动时重复触发动画
• isElementInViewport函数通过getBoundingClientRect()获取元素的位置，判断它是否出现在当前视口范围内
• 滚动时每次触发checkScroll，符合条件就执行动画，然后解绑滚动事件（也可以不解绑，不过解绑能节省一点性能）

这样修改后，只有当用户滚动到你的服务板块时，气泡才会旋转着淡入，完美实现你想要的滚动触发入场效果～

备注：内容来源于stack exchange，提问作者kate elly