📅 最后修改于: 2023-12-03 14:56:09.943000 🧑 作者: Mango
滚动CSS上的动画是指在滚动网页时，随着页面的滚动而产生动画效果的 CSS 技巧。这种技巧可以为网页添加更多的交互性和视觉效果。在本文中，将介绍如何使用 CSS 实现一些常见的滚动动画效果。
滚动触发动画是指在页面滚动到特定位置时，元素会触发动画效果。这种效果可以通过 CSS 的 @keyframes 和 animation 属性实现。以下是一个在页面滚动到元素顶部时，元素从左侧飞入的动画效果示例：
/* 定义动画关键帧 */
@keyframes fly-in-left {
0% {
opacity: 0;
transform: translateX(-100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
/* 应用动画效果 */
.element {
animation: fly-in-left 1s forwards;
}
在上面的代码中，通过 @keyframes 定义了一个名为 fly-in-left 的关键帧动画。在动画开始时，元素的不透明度为 0，水平方向上偏移了 100% 的距离（即飞到了页面外面）。在动画结束时，元素的不透明度为 1，水平方向上回到了原位置。然后通过 animation 属性将动画应用到元素上，其中指定了持续时间为 1s，动画执行结束后元素保持在最终状态（即动画执行后的状态）。
接下来是如何实现滚动触发动画效果的代码片段：
/* 定义动画关键帧 */
@keyframes fly-in-left {
0% {
opacity: 0;
transform: translateX(-100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
/* 应用动画效果 */
.animated {
animation: fly-in-left 1s forwards;
opacity: 0;
visibility: hidden;
}
/* 触发动画 */
.animated.animated-show {
opacity: 1;
visibility: visible;
}
在这个例子中，通过定义一个名为 animated 的类来实现滚动触发动画效果。首先将元素的不透明度设置为 0，并将 visibility 属性设置为 hidden 以使元素在页面中不可见。然后通过 animation 属性应用 fly-in-left 动画，使元素在滚动到特定位置时飞入页面。最后，通过给元素添加 animated-show 类来触发动画效果，即将元素的不透明度和可见性设置为 1。
滚动时改变元素样式是指在页面滚动时，根据滚动的位置来改变元素样式。这种效果可以通过 CSS 的 scroll 属性和 JavaScript 来实现。以下是一个在页面滚动时，导航栏的背景颜色从透明到不透明渐变的效果示例：
/* 初始样式 */
.navbar {
background-color: rgba(0, 0, 0, 0);
transition: background-color 0.5s;
}
/* 滚动时样式 */
.navbar.scrolled {
background-color: rgba(0, 0, 0, 0.8);
}
在上面的代码中，通过将初始背景颜色设置为透明，并使用 transition 属性将背景颜色渐变效果应用到元素上。然后通过给元素添加 scrolled 类来触发滚动时改变样式的效果，即将背景颜色改变成不透明的灰色。
为了实现在滚动时添加/删除类的效果，需要使用 JavaScript 来监听 scroll 事件，并在事件处理函数中根据滚动位置添加/删除类。
以下是如何实现滚动时改变元素样式的代码片段：
<body>
<nav class="navbar">
...
</nav>
<div class="content">
...
</div>
</body>
<script>
var navbar = document.querySelector('.navbar');
window.addEventListener('scroll', function() {
if (window.pageYOffset > navbar.offsetTop) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
});
</script>
在这个例子中，使用 JavaScript 监听 window 对象上的 scroll 事件，并在事件处理函数中根据滚动位置添加/删除类。navbar.offsetTop 表示导航栏距离页面顶部的距离，window.pageYOffset 表示当前页面在垂直方向上的滚动距离。当滚动距离大于导航栏距离页面顶部的距离时，给导航栏添加 scrolled 类。否则，删除 scrolled 类。
滚动CSS上的动画是一种很酷的效果，可以为网页添加更多的交互性和视觉效果。通过 CSS 的 @keyframes 和 animation 属性，可以实现滚动触发动画效果。通过 scroll 属性和 JavaScript，可以实现滚动时改变元素样式的效果。希望这篇文章能让你掌握这种效果的实现方法。