html-воспроизведение gif один раз при наведении и воспроизведение в обратном порядке при наведении мыши

Я хочу иметь GIF, который воспроизводится один раз, когда вы наведете на него курсор мыши и остановитесь на последнем кадре, а затем, когда вы переместите мышь с изображения, он должен воспроизводиться назад и останавливаться на первом кадре.



У меня есть статическое изображение для первого и последнего кадра, а также отдельные анимированные GIF-файлы, воспроизводящие анимацию вперед и назад, я просто не знаю, как я буду это программировать.



Оптимально я бы просто использовал CSS, но из того, что я знаю, это кажется невозможным без js/jquery, однако, если у кого-то есть какие-либо идеи, это будет очень ценно.

671   1  

1 ответ:

Я думаю, что это было бы трудно с чистым CSS, так как как только вы загружаете анимированный gif, он бесконечно петляет независимо от того, виден он или нет. Таким образом, вам придется синхронизировать начало gif с mouseover / mouseout события.

Вот реализация jQuery, которая изменяет атрибут src на события mouseover и mouseout. Блокировка вращения обрабатывает случай, когда Вы mouseout или mouseover во время анимации-он ждет, пока анимация не будет выполнена, а затем воспроизводит обратный ход, если мышь не будет завис над элементом, когда прямая анимация заканчивается.

var firstFrame = "http://imgur.com/UeMOrix.gif";
var lastFrame = "http://imgur.com/vy7weQ1.gif";
var forwardAnimation = "http://i.imgur.com/UB0g8dT.gif";
var backwardAnimation = "http://i.imgur.com/aIxrX26.gif";

var animationLength = 5040;
var playing = false;
var checkingIfPlaying = false;

function playForward() {
  if ($("#animation").is(":hover")){
    playing = true;
    $("#animation").attr("src", forwardAnimation);
    window.setTimeout(function () {
      $("#animation").attr("src", lastFrame);
      playing = false;
    }, animationLength);
  }
  else {
    $("#animation").attr("src", firstFrame);
  }
}

function playBackward() {
  if ($("#animation").is(":hover")) {
    $("#animation").attr("src", lastFrame);
  }
  else {
    playing = true;
    $("#animation").attr("src", backwardAnimation);
    window.setTimeout(function () {
      $("#animation").attr("src", firstFrame);
      playing = false;
    }, animationLength);
  }
}

$("#animation").mouseover(function (e) {
    if (!checkingIfPlaying) {
      checkingIfPlaying = window.setInterval(function () {
        if (!playing) {
          window.clearInterval(checkingIfPlaying);
          playForward()
          checkingIfPlaying = false;
        }
      }, 0);
    }
});

$("#animation").mouseout(function (e) {
    if (!checkingIfPlaying) {
      checkingIfPlaying = window.setInterval(function () {
        if (!playing) {
          window.clearInterval(checkingIfPlaying);
          playBackward()
          checkingIfPlaying = false;
        }
      }, 0);
    }
});
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>so</title>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

</head>

<body>

<!-- preload images to prevent flickering -->
<div style="display: none;">
    <img src="http://i.imgur.com/UB0g8dT.gif">
    <img src="http://i.imgur.com/aIxrX26.gif">
    <img src="http://imgur.com/vy7weQ1.gif">
</div>

<img id="animation" src="http://imgur.com/UeMOrix.gif">

</body>
</html>
2  
2015-06-30 08:19:15

Comments

    Ничего не найдено.
Click here to cancel reply.