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):
<script type="text/javascript">
var paikka = 400;
var hyppy = 200; //Hypyn pituus pikseleinä
function liikuta_oikealle(){
// Siirretään paikkaa hypyn verran oikealle:
paikka = paikka+hyppy;
// Toteutetaan siirto Css-tyylin avulla (huom. "px" tarvitaan!):document.getElementById('otsikko').style.left=paikka+"px";
}
function liikuta_vasemmalle(){
paikka = paikka-hyppy;
document.getElementById('otsikko').style.left=paikka+"px";
}
</script>
<h1 style="position: relative; background-color: none;" id="otsikko">Salamaotsikko</h1>
<button type="button" onclick="liikuta_oikealle()">Liikuta otsikkoa!</button>
<button type="button" onclick="liikuta_vasemmalle()">Peruuta!</button>
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:
<script type="text/javascript">
var paikka = 0;
var kerroin = 1; // Tämän avulla voidaan suunta vaihtaa
var ajastin;
function liikuta_otsikko()
{
paikka = paikka+kerroin;
document.getElementById('otsikko2').style.left=paikka+"px";
// Tämä kutsuu 40 millisekunnin kuluttua funktiota "liikuta_otsikko()"(eli itseään)
ajastin = setTimeout("liikuta_otsikko()",40);
}
// Tämä vaihtaa vaakatason suunnan:
function vaihda_suunta()
{
if(kerroin == 1){
kerroin = -1;
}
else{
kerroin = 1;
}
}
// Tämä pysäyttää liikkeen:
function pysayta_otsikko()
{
clearTimeout(ajastin);
}
</script>
<h1 style="position: relative; background-color: none;" id="otsikko2">Etanaotsikko</h1>
<form>
<input type="button" value="Liikuta otsikkoa!" onclick="liikuta_otsikko()" />
<input type="button" value="Pysäytä otsikko!" onclick="pysayta_otsikko()" />
<input type="button" value="Vaihda suunta!" onclick="vaihda_suunta()" />
</form>
Toinen metodi liikkeen toteuttamiseen on setInterval(). Alla siitä esimerkki:
Etanaotsikko2
Ja vastaavat koodit:
<script type="text/javascript">
var paikka2 = 0;
var kerroin2 = 1; // Tämän avulla voidaan suunta vaihtaa
var ajastin2;
function liikuta_tasaisesti(){
// Kutsuu metodia 40 millisekunnin välein.
ajastin2 = setInterval("liikuta_otsikkoa_pikkisen()", 40);
}
function liikuta_otsikkoa_pikkisen()
{
paikka2 = paikka2+kerroin2;
document.getElementById('otsikko3').style.left=paikka2+"px";
}
// Tämä vaihtaa vaakatason suunnan:
function vaihda_suunta()
{
if(kerroin2 == 1){
kerroin2 = -1;
}
else{
kerroin2 = 1;
}
}
// Tämä pysäyttää liikkeen:
function pysayta_otsikko()
{
clearInterval(ajastin2);
}
</script>
<h1 style="position: relative; background-color: none;" id="otsikko3">Etanaotsikko2</h1>
<form>
<input type="button" value="Liikuta otsikkoa!" onclick="liikuta_tasaisesti()" />
<input type="button" value="Pysäytä otsikko!" onclick="pysayta_otsikko()" />
<input type="button" value="Vaihda suunta!" onclick="vaihda_suunta()" />
</form>
