问题描述
我正在尝试构建一个循环滚动的网站标题文本,就像此处 Google 主页上的文本一样 - https://careers.google.com/d/
我曾尝试对其进行编码,但我一点运气都没有。非常感谢您的帮助,谢谢。
解决方法
您要查找的是 transform。至少从你给出的例子来看。
创建要“滚动”的元素。
<div id="element"><h1>Code<h1></div>
然后向其中添加一些 javascript 以应用一些位置更改。
var element = document.querySelector("#element");
setTimeout(function() {
element.style.transform = "translateY(100px)";
},200);
从这里我们可以使用 CSS 使其动画化,以便向下滚动。
#element {
position: absolute;
transition: transform 3s linear;
transform: translateY(0px);
will-change: transform;
}
这是如何向下移动一个元素的示例。您可以对要移动的第二个元素进行清洗和重复。