Анимация заголовка вдоль края страницы

1005

26 февраля 2017, 10:13

В учебнике написана задача:

Создайте собственную анимацию. Используйте setInterval для анимации заголовка h1, двигая его по квадрату вдоль краев страницы.

Текст двигаю вправо и вниз, а дальше никак, помогите начинающему

var leftOffset = 0; 
var topOffset = 0; 
  
var moveHeading = function () { 
  $("#heading").offset({  
    left: leftOffset, 
    top: topOffset 
  }); 
  leftOffset++; 
  if (leftOffset > 200) { 
    leftOffset = 200; 
 
    topOffset++; 
    if (topOffset > 200) { 
      topOffset = 200; 
    } 
  }  
}; 
 
 
setInterval(moveHeading, 30)

<html> 
<head> 
 <meta charset="UTF-8"> 
 <title>move</title> 
</head> 
<body> 
  <h1 id="heading">Привет, мир!</h1> 
  <script src="https://code.jquery.com/jquery-2.1.0.js"></script> 
</body> 
</html>

Answer 1

Вот работающий пример

 <meta charset="UTF-8"> 
 <title>move</title> 
 </head> 
 <body> 
 <h1 id="heading">Привет, мир!</h1> 
 <script src="https://code.jquery.com/jquery-2.1.0.js"></script> 
 <script> 
 
 
 
var leftOffset = 0; 
var topOffset = 0; 
var dir = "right"; 
 
var moveHeading = function () {$("#heading").offset({ left: leftOffset,                        top: topOffset}) 
if(dir == "right")     
leftOffset++; 
else 
leftOffset--; 
if(leftOffset < 0 && topOffset > 0) 
{ 
 leftOffset = 0; 
 topOffset--; 
} 
else if(topOffset == 0) 
{ 
 dir = "right"; 
} 
if (leftOffset > 200) { 
leftOffset = 200; 
 
topOffset++; 
if (topOffset > 200) { 
 topOffset =200; 
 dir = "left"; 
 } 
 else if(topOffset < 0) 
 { 
 topOffset =0; 
 } 
 }  
 }; 
 
 
 setInterval(moveHeading, 30) 
</script> 
</body> 
</html>

Answer 2

У текста есть 4 состояния(направления движения), которые нужно переключать.
Также, чтобы анимация выглядела равномерной, нужно высчитывать величину сдвига в зависимости от прошедшего времени.

var leftOffset = 0; 
var topOffset = 0; 
var direction = 'r'; 
var start = Date.now(); 
var pixPerSec = 300; 
var leftLimit = $(document).width() - $('#heading').width(); 
var topLimit = $(document).height() - $('#heading').height(); 
  
var moveHeading = function () { 
  var now = Date.now(); 
  var step = pixPerSec*(now - start) / 1e3; 
   
  $("#heading").offset({  
    left: leftOffset, 
    top: topOffset 
  }); 
   
  switch (direction) { 
   case 'r': 
     leftOffset += step; 
     if (leftOffset > leftLimit) { 
       leftOffset = leftLimit; 
       direction = 'd'; 
     } 
     break; 
   case 'd': 
     topOffset += step; 
     if (topOffset > topLimit) { 
       topOffset = topLimit; 
       direction = 'l'; 
     } 
     break; 
   case 'l': 
     leftOffset -= step; 
     if (leftOffset < 0) { 
       leftOffset = 0; 
       direction = 'u'; 
     } 
     break; 
   case 'u': 
     topOffset -= step; 
     if (topOffset < 0) { 
       topOffset = 0; 
       direction = 'r'; 
     } 
     break; 
  } 
  start = now; 
}; 
 
 
setInterval(moveHeading, 30)

h1{display: inline-block; margin: 0;} 
body{background-color: #eee;}

<html> 
<head> 
 <meta charset="UTF-8"> 
 <title>move</title> 
</head> 
<body> 
  <h1 id="heading">Привет, мир!</h1> 
  <script src="https://code.jquery.com/jquery-2.1.0.js"></script> 
</body> 
</html>