Ve videu jsme si ukázali, jak rozhýbat HTML elementy pomocí javascriptu.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Nela Hrabcová - Dokážeš cokoli 0006 - Animace</title>
<script type="text/javascript" src="skripty.js"></script>
</head>
<body style="position:relative;background-color:#88aaff;">
<img id="m1" style="width:50px;position:absolute;left:150px;top:60px;opacity:0.5;" src="mrak.png"></div>
<img id="m2" style="width:60px;position:absolute;left:180px;top:300px;opacity:0.55;" src="mrak.png"></div>
<img id="m3" style="width:40px;position:absolute;left:300px;top:650px;opacity:0.6;" src="mrak.png"></div>
<img id="m4" style="width:100px;position:absolute;left:300px;top:500px;opacity:0.65;" src="mrak.png"></div>
<img id="m5" style="width:150px;position:absolute;left:800px;top:100px;opacity:0.7;" src="mrak.png"></div>
<img id="m6" style="width:180px;position:absolute;left:550px;top:300px;opacity:0.75;" src="mrak.png"></div>
<img id="m7" style="width:220px;position:absolute;left:130px;top:700px;opacity:0.8;" src="mrak.png"></div>
<img id="z1" style="width:300px;position:absolute;left:-300px;top:400px;" src="z1.png"></div>
<img id="m8" style="width:350px;position:absolute;left:-850px;top:550px;opacity:0.9;" src="mrak.png"></div>
<img id="m9" style="width:300px;position:absolute;left:-1300px;top:300px;opacity:0.9;" src="mrak.png"></div>
</body>
</html>
window.addEventListener("load", posun, false);
function posun() {
m1.style.left=parseFloat(m1.style.left)+0.1+"px";
m2.style.left=parseFloat(m2.style.left)+0.2+"px";
m3.style.left=parseFloat(m3.style.left)+0.3+"px";
m4.style.left=parseFloat(m4.style.left)+0.4+"px";
m5.style.left=parseFloat(m5.style.left)+0.5+"px";
m6.style.left=parseFloat(m6.style.left)+0.7+"px";
m7.style.left=parseFloat(m7.style.left)+0.8+"px";
m8.style.left=parseFloat(m8.style.left)+1.3+"px";
m9.style.left=parseFloat(m9.style.left)+2.2+"px";
z1.style.left=parseFloat(z1.style.left)+1+"px";
setTimeout(posun, 20);
}
Tady je tento kód jako ukázková stránka.
Pokud jste to ještě neudělali, podívejte se na mé video (níže) a pak zkoušejte, zkoušejte, zkoušejte... Prostě si s těmi obrázky a scripty hrajte. Jak myslíte, že se to učím já?