网站标题的自动图像滚动条

编程问答 2022-06-02

问题描述

我正在尝试构建一个循环滚动的网站标题文本，就像此处 Google 主页上的文本一样 - https://careers.google.com/d/

我曾尝试对其进行编码，但我一点运气都没有。非常感谢您的帮助，谢谢。

enter image description here

enter image description here

解决方法

您要查找的是 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;
}

这是如何向下移动一个元素的示例。您可以对要移动的第二个元素进行清洗和重复。

JSFiddle

Further Fiddle with more example

htmlscroller