如何解决网站标题的自动图像滚动条
我正在尝试构建一个循环滚动的网站标题文本,就像此处 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;
}
这是如何向下移动一个元素的示例。您可以对要移动的第二个元素进行清洗和重复。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。