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

#javascript #jquery

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


  Создайте собственную анимацию.   Используйте 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)


 
 


  
Привет, мир!
  





    

Ответы

Ответ 1

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



 
 
 
 
 
Привет, мир!
 
 




Ответ 2

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



var start = Date.now(); // Время начала анимации
var leftOffset = 0;     // Начальное положение
var topOffset = 0;
var direction = 'r';    // Начальное направление
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;}


 
 


  
Привет, мир!
  




Ответ 3




    
    
    
     
    
    


Hello world