-1

I am trying to build a looped scrolling website header text like the one on the Google homepage here - https://careers.google.com/d/

I have tried to code it but I am having no luck at all. Would really appreciate some help please, thank you.

enter image description here

enter image description here

Pogrindis
  • 7,755
  • 5
  • 31
  • 44
  • `i have tried to code it` Can you show some examples that you're having problems with ? – Pogrindis Dec 22 '20 at 22:38
  • 1
    Please take the [tour] and read [ask]; this is neither a code-writing nor tutorial service. If you have code that isn't working, give a [mre] with a more specific problem than *"having no luck"*. – jonrsharpe Dec 22 '20 at 22:38

1 Answers1

0

What you're looking for is transform. At least from the example you gave.

Create your element to 'scroll'.

<div id="element"><h1>Code<h1></div>

Then add some javascript to it to apply some position change.

  var element = document.querySelector("#element");
  setTimeout(function() {
    element.style.transform = "translateY(100px)";
  }, 200);

From here we can make it animated with CSS so its scrolling down instead.

#element {
    position: absolute;
    transition: transform 3s linear;
    transform: translateY(0px);
    will-change: transform;
}

This is an example of how to move one element down.. You can wash and repeat for the second element you wan to move.

JSFiddle

Further Fiddle with more example

Pogrindis
  • 7,755
  • 5
  • 31
  • 44