看到阿里云某个页面使用了滚动时元素渐入的动画效果，想在主题里添加类似的动效，把页面源代码扔给了deepseek，并让它提供一个极简的实现模板。感觉自己成了一个可有可无的中间商。
实现原理分析
Intersection Observer API：现代浏览器提供的API，可以高效检测元素是否进入视口
CSS Transition/Animation：结合透明度(Opacity)和位移(Transform)实现平滑过渡
滚动触发：当元素进入视口时添加动画类
简单案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滚动渐入效果</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.section {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 50px;
opacity: 0;
transform: translateY(50px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.section.visible {
opacity: 1;
transform: translateY(0);
}
h2 {
font-size: 2rem;
margin-bottom: 20px;
}
p {
font-size: 1.2rem;
max-width: 800px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="section">
<h2>第一部分标题</h2>
<p>这里是第一部分的内容，当滚动到这部分时会有渐入效果。</p>
</div>
<div class="section">
<h2>第二部分标题</h2>
<p>这里是第二部分的内容，同样会有滚动渐入效果。</p>
</div>
<div class="section">
<h2>第三部分标题</h2>
<p>这里是第三部分的内容，继续向下滚动查看效果。</p>
</div>
<div class="section">
<h2>第四部分标题</h2>
<p>这里是最后一部分的内容，滚动效果会在这里再次触发。</p>
</div>
</div>
<script>
// 使用Intersection Observer API检测元素是否进入视口
const sections = document.querySelectorAll('.section');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
// 可选：动画完成后取消观察以提升性能
// observer.unobserve(entry.target);
}
});
}, {
threshold: 0.1 // 当元素10%进入视口时触发
});
// 观察所有section元素
sections.forEach(section => {
observer.observe(section);
});
</script>
</body>
</html>关键点说明
CSS部分：
初始状态设置opacity: 0和transform: translateY(50px)使元素不可见且下移
添加transition属性实现平滑过渡效果
.visible类使元素变为可见并回到原位
JavaScript部分：
使用IntersectionObserver监听元素进入视口
当元素进入视口时添加.visible类触发动画
可调整threshold值控制触发时机
扩展建议：
可以添加不同的动画方向（左、右、上、下）
可以设置不同的延迟时间实现错落有致的动画效果
可以结合CSS动画(@keyframes)实现更复杂的动画
