javascript-animaatio
CSS
span { position: absolute; left: 0; top: 0; }
HTML
<span id="moveit">javascript-animaatio</span>
Javascript
const element = document.getElementById('moveit'); let start; // animoidaan teksti näytön vasemmasta oikeaan laitaan // halutaan, että animointi kestää 2 sekuntia eli 2000 ms // lasketaan siirrettävä matka per ms let aika = 2000.0; // vähennetään elementin leveys sivun leveydestä niin ei valuta näytöltä ulos let maksimi = document.body.clientWidth-element.clientWidth let siirto = maksimi/aika; let paikka = 0; // aloituskohta function step(timestamp) { if (start === undefined) start = timestamp; const elapsed = timestamp - start; start = timestamp; paikka = paikka + Math.round(siirto * elapsed); if ( paikka > maksimi ) { paikka = maksimi; } element.style.left = paikka + 'px'; if ( paikka < maksimi) { window.requestAnimationFrame(step); } } window.requestAnimationFrame(step);
Konsoli