Анімація

Курси, вебінари, олімпіади. Портал Всеосвіта.

До прикладів Cайт гуртка WEB-MIDITAUR Блог проекту Practice.

<!DOCTYPE html>
<html>
<head>
    <title>Інтерактивне програмування</title>
</head>

<body>
    <h1 id="heading">Привіт, друже!</h1>

<script src="js/jquery.min.js"></script>

<script>
    var direction = 'вправо';
    var offset = 0;

$("#heading").offset({ left: offset, top: offset });

var moveHeading = function () {
      if (direction === 'вправо') {
        $("#heading").offset({ left: offset });
        offset++;
        if (offset > 200) {
          offset = 0;
          direction = 'вниз';
        }
      } else if (direction === 'вниз') {
        $("#heading").offset({ top: offset });
        offset++;
        if (offset > 200) {
          offset = 200;
          direction = 'вліво';
        }
      } else if (direction === 'вліво') {
        $("#heading").offset({ left: offset });
        offset--;
        if (offset < 0) {
          offset = 200;
          direction = 'вверх';
        }
      } else if (direction === 'вверх') {
        $("#heading").offset({ top: offset });
        offset--;
        if (offset < 0) {
          offset = 0;
          direction = 'вправо';
        }
      }
    };

setInterval(moveHeading, 30);
    </script>
</body>
</html>