TIEA2120
Web-käyttöliittymien ohjelmointi
CSS
h1 { margin: 0; padding: 0; animation-duration: 4s; animation-iteration-count: infinite; animation-direction: alternate; animation-name: move; /* sijoitetaan alussa oikeaan ylänurkkaan */ position: absolute; right: 0; top: 0; } @keyframes move { from { transform: translate(0,0); } to { /* animoidaan näytön leveyden ja korkeuden verran tässä voi käyttää myös %-yksiköitä, mutta niiden merkitys vaihtelee riippuen siitä minkä elementin sisällä animoitava elementti sijaitsee Käytä aina jotain suhteellista yksikköä niin animaatiosi skaalautuu helposti eri tilanteisiin. Vältä pikseleiden käyttämistä. */ transform: translate(-100vw,100vh); } }
HTML
<h1>TIEA2120</h1><h1>Web-käyttöliittymien ohjelmointi</h1>
Javascript
// haetaan ensimmäinen h1-elementti let h1 = document.getElementsByTagName("h1")[0]; // h1-elementin animaatiot ja otetaan niistä ensimmäinen let anims = h1.getAnimations(); let anim = anims[0]; console.log(anim); // haetaan animaation keyframet let keyframes = anim.effect.getKeyframes(); console.log(keyframes); console.log(keyframes[1]); // muutetaan ensimmäisen keyframen transform-arvoa keyframes[0].transform = "translate(-50vw, 50vh)"; // asetetaan uudet keyframet anim.effect.setKeyframes(keyframes);
Konsoli