Witam otóż, miałem takie zadanie do wykonania. miałem wykonać animacje, która przemieści tekst "po lini prostokąta" od lewej do prawej, od góry do dołu, od prawej do lewej, i od dołu do góry.
Skrypt przemieszczający jest poniżej jednakże mam dwa pytania:
1) jak teraz zrobić by animacja wykonywała się w kółko?
2) czy da sie mój kod jakoś zrefaktoryzować??
<!DOCTYPE html>
<html lang="pl-PL">
<head>
<meta charset="UTF-8"/>
<title>Mousemove</title>
</head>
<body>
<br>
<br>
<br>
<h1 id="nagłówek">Hello world!</h1>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script>
var przesunięcieZLewej = 0;
var gora;
var pozycjay;
var przesuwajNagłówek = function () {
$("#nagłówek").offset({ left: przesunięcieZLewej });
przesunięcieZLewej++;
pozycjay=$("#nagłówek").pageY;
if (przesunięcieZLewej > 200) {
przesunięcieZLewej = 200;
}
};
// gora = $("#nagłówek").pageY;
setTimeout(interwal1,0);
var a;
function interwal1()
{
a = setInterval(przesuwajNagłówek, 30);
};
var gora = 102;
var przesuwajNagłówek2 = function () {
$("#nagłówek").offset({ top: gora });
gora++;
if(gora>=250)
{
gora=250;
}
};
var b;
function interwal2()
{
b = setInterval(przesuwajNagłówek2, 30);
};
setTimeout(przesuwajNagłówek2, 6600);
setTimeout(interwal2,6600);
var pozycja2 = 200;
var przesuwajNagłówek3 = function () {
$("#nagłówek").offset({ left: pozycja2 });
pozycja2--;
if (pozycja2 <= 1) {
pozycja2 = 0;
}
};
function interwal3()
{
clearInterval(a);
setInterval(przesuwajNagłówek3, 30);
};
setTimeout(przesuwajNagłówek3,12000);
setTimeout(interwal3,12000);
var gora2;
gora2=250;
var przesuwajNagłówek4 = function () {
$("#nagłówek").offset({ top: gora2 });
gora2--;
if(gora2<=102)
{
gora2=102;
}
};
function interwal4()
{
clearInterval(b);
setInterval(przesuwajNagłówek4, 30);
};
setTimeout(przesuwajNagłówek4, 20000);
setTimeout(interwal4,20000);
</script>
</body>
</html>