\(\renewcommand{\vec}[1]{\mathbf{#1}} \DeclareMathOperator*{\sijoitus}{\Big/} \newcommand{\eval}[2]{\sijoitus_{\kern-0.7em#1}^{\kern0.7em#2}\!} \)

5.3.11 Liike

Javascriptin ja CSS:n yhteistyöllä saadaan elementit nettisivulla liikkumaan. Homma toimii niin, että Javascriptin avulla muutetaan elementin paikkaa.

Jotta muutos toimii, täytyy elementillä olla position määritelty (esim. position: relative tai position: absolute)

Alla on pieni esimerkki, jossa otsikko saadaan hyppäämään oikealle tai vasemmalle.

Salamaotsikko

Yllä oleva saadaan aikaan seuraavalla JS-koodilla (JS:n alla on myös tarvittavat Html-komponentit):

Usein halutaan, että kohteen liikkumisnopeutta voidaan säätää. Tällöin liike pitää toteuttaa niin, että liikutetaan kohdetta pieni pätkä esimerkiksi 25 kertaa sekunnissa. Tällöin silmä näkee liikkeen (ainakin melkein) tasaisena. Alla esimerkki otsikon hitaasta liikkeestä:

Etanaotsikko

Ja vastaavat koodit:

Toinen metodi liikkeen toteuttamiseen on setInterval(). Alla siitä esimerkki:

Etanaotsikko2

Ja vastaavat koodit: