用HTML编写滚动动画
要实现滚动动画，可以使用CSS中的@keyframes和animation属性，以及JavaScript中的scroll事件。
首先，在HTML中添加一个用于滚动的容器，例如：
<div id="scroll-container">
<p>这是一段需要滚动的文本。</p>
</div>
然后，在CSS中定义动画效果：
@keyframes scroll {
from {
transform: translateY(0);
}
to {
transform: translateY(-100%);
}
}
#scroll-container p {
animation: scroll 6s linear infinite;
}
这里定义了一个名为scroll的动画，从初始状态的translateY(0)向上滚动到translateY(-100%)，持续时间为6秒，使用线性动画效果，无限循环。
最后，在JavaScript中监听滚动事件，当滚动到指定位置时触发动画：
window.addEventListener('scroll', function() {
var scrollPosition = window.scrollY;
var targetPosition = document.getElementById('scroll-container').offsetTop;
if (scrollPosition > targetPosition) {
document.getElementById('scroll-container').classList.add('scrolling');
} else {
document.getElementById('scroll-container').classList.remove('scrolling');
}
});
这里通过计算滚动位置和目标位置，判断是否滚动到了指定位置，然后添加或移除一个名为scrolling的类，用于触发动画。
最后，完整的HTML代码如下：
<!DOCTYPE html>
<html>
<head>
<title>滚动动画</title>
<style>
@keyframes scroll {
from {
transform: translateY(0);
}
to {
transform: translateY(-100%);
}
}
#scroll-container p {
animation: scroll 6s linear infinite;
}
#scroll-container.scrolling p {
animation-play-state: running;
}
#scroll-container p:hover {
animation-play-state: paused;
}
</style>
</head>
<body>
<div id="scroll-container">
<p>这是一段需要滚动的文本。</p>
</div>
<script>
window.addEventListener('scroll', function() {
var scrollPosition = window.scrollY;
var targetPosition = document.getElementById('scroll-container').offsetTop;
if (scrollPosition > targetPosition) {
document.getElementById('scroll-container').classList.add('scrolling');
} else {
document.getElementById('scroll-container').classList.remove('scrolling');
}
});
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/YJy 著作权归作者所有。请勿转载和采集!