请求实现页面文本下滑入场动画：滚动触发1秒后从底部滑入

实现思路 #

通过CSS定义元素初始隐藏状态与滑入动画，结合JavaScript监听滚动事件，判断元素进入视口后延迟1秒触发显示动画。

1. CSS样式配置 #

给需要动画的文本元素设置初始隐藏状态，以及滑入过渡效果：

/* 文本初始状态：从底部隐藏 */
.solutionhead, .solutiontext {
  opacity: 0;
  transform: translateY(20px); /* 从下方20px位置启动动画 */
  transition: all 0.6s ease-out; /* 滑入动画时长0.6秒，可按需调整 */
}

/* 文本激活状态：滑入显示 */
.solutionhead.active, .solutiontext.active {
  opacity: 1;
  transform: translateY(0);
}

/* 容器初始隐藏，避免图片提前显示 */
.solutionout1 {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.solutionout1.active {
  opacity: 1;
}

2. JavaScript逻辑实现 #

监听页面滚动，判断元素是否进入视口，延迟1秒添加激活类（加入防抖优化性能）：

// 防抖函数：避免滚动事件频繁触发
function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

// 判断元素是否进入视口（80%视口高度时触发，可调整）
function isInViewport(element) {
  const rect = element.getBoundingClientRect();
  return (
    rect.top <= (window.innerHeight || document.documentElement.clientHeight) * 0.8 &&
    rect.bottom >= 0
  );
}

// 处理滚动触发的动画逻辑
function handleScrollAnimations() {
  const solutionItems = document.querySelectorAll('.solutionout1');
  
  solutionItems.forEach(item => {
    if (isInViewport(item) && !item.classList.contains('active')) {
      // 延迟1秒触发动画
      setTimeout(() => {
        item.classList.add('active');
        const textElements = item.querySelectorAll('.solutionhead, .solutiontext');
        textElements.forEach(el => el.classList.add('active'));
      }, 1000);
    }
  });
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', () => {
  // 初始检查一次视口内的元素
  handleScrollAnimations();
  // 绑定防抖后的滚动事件
  window.addEventListener('scroll', debounce(handleScrollAnimations, 150));
});

3. 整合后的中文HTML代码 #

将样式、脚本与你的页面结构结合（已翻译为中文）：

<style>
/* 嵌入CSS样式 */
.solutionhead, .solutiontext {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease-out;
}
.solutionhead.active, .solutiontext.active {
  opacity: 1;
  transform: translateY(0);
}
.solutionout1 {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.solutionout1.active {
  opacity: 1;
}
</style>

<h6 style="margin-right: 70px;" class="section-title text-center">我们的解决方案</h6>
<h6 style="margin-right: 120px;" class="section-subtitle text-center mb-5 pb-3">我们拥有经验丰富、资质过硬的团队，可为您提供高效、高性能且有保障的解决方案</h6>

<div class="solutionout1">
  <img class="solu" style="height:80px ;" src="assets/imgs/webdevelop.png" alt="网站开发图标" >
  <div>
    <p class="solutionhead">网站开发</p>
    <p class="solutiontext">对于将企业线上展示托付给我们的客户，我们会结合最新技术，提供快速、高收益、安全且有效的解决方案。</p>
  </div>
</div>

<script>
// 嵌入JavaScript逻辑
function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}
function isInViewport(element) {
  const rect = element.getBoundingClientRect();
  return (
    rect.top <= (window.innerHeight || document.documentElement.clientHeight) * 0.8 &&
    rect.bottom >= 0
  );
}
function handleScrollAnimations() {
  const solutionItems = document.querySelectorAll('.solutionout1');
  solutionItems.forEach(item => {
    if (isInViewport(item) && !item.classList.contains('active')) {
      setTimeout(() => {
        item.classList.add('active');
        const textElements = item.querySelectorAll('.solutionhead, .solutiontext');
        textElements.forEach(el => el.classList.add('active'));
      }, 1000);
    }
  });
}
document.addEventListener('DOMContentLoaded', () => {
  handleScrollAnimations();
  window.addEventListener('scroll', debounce(handleScrollAnimations, 150));
});
</script>

自定义调整说明 #

• 修改transform: translateY(20px)的数值可改变文本滑入的起始位置；
• 调整transition: all 0.6s ease-out中的0.6s可更改动画时长；
• isInViewport函数中的*0.8可调整动画触发时机（比如改为*0.9就是元素进入90%视口时触发）；
• 防抖函数的150毫秒间隔可优化滚动性能，数值越大触发频率越低。

内容的提问来源于stack exchange，提问作者user20107962