Automatic image scroller for a website heading

Question

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.

Answer 1

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