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.
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.
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.