你能告诉我如何制作一个与滚动同步的水平动画吗?
我做了一个示例，但有一个缺点-事件有一个开始和结束点，我想做一个永久的动画:
const targetTx = document.querySelector('h1');
function animateTx() {
if (document.documentElement.scrollTop > 50) {
targetTx.classList.add('active');
} else {
targetTx.classList.remove('active');
}
}
window.onscroll = function() {animateTx()};section {
height: 600px;
border-bottom: solid 1px #000;
overflow: hidden;
}
h1 {
display: block;
font-size: 10rem;
color: #999;
white-space: nowrap;
transition: 0.5s;
}
h1.active {
margin-left: -50%;
transition: 0.5s;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<section>
<h1>TEST TEXT</h1>
</section>
<section></section>
</body>
</html>提前感谢!
使用css动画:
const targetTx = document.querySelector('h1');
function animateTx() {
if (document.documentElement.scrollTop > 50) {
targetTx.classList.add('slide-anim');
} else {
targetTx.classList.remove('slide-anim');
}
}
window.onscroll = function() {animateTx()};section {
height: 600px;
border-bottom: solid 1px #000;
overflow: hidden;
}
h1 {
display: block;
font-size: 10rem;
color: #999;
white-space: nowrap;
}
.slide-anim {
animation: slide 3s linear infinite;
}
@keyframes slide {
0% {
margin-left: 0;
}
25% {
margin-left: -50%;
}
50% {
margin-left: 0%;
}
75% {
margin-left: 50%;
}
100% {
margin-left: 0;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<section>
<h1>TEST TEXT</h1>
</section>
<section></section>
</body>
</html>