1

Имеется несколько screenshot'ов нарезанных из видеоролика, каким образом можно сложить из них анимированную картинку, которая бы запускалась только при наведении курсора?
Приоритет: CSS, JS, все остальное

2
  • иди читай что такое слайдер 21 ноя 2015 в 15:23
  • @ParanoidPanda мне известно что такое слайдер, а еще кажется что это можно сделать без использования громоздкого кода
    – Plush
    21 ноя 2015 в 15:25

3 ответа 3

3

Ну, вот первое, что пришло в голову:

var cats = ["http://i.stack.imgur.com/y7lKj.jpg",
  "http://i.stack.imgur.com/Utqdx.jpg",
  "http://i.stack.imgur.com/Pj16W.jpg"
];

var t, counter = 0;
var $image = $('.image');
$(".image").mouseover(function() {

  if (!t) {

    t = setInterval(function() {
      $image.attr('src', cats[counter]);
      counter = (counter + 1) % 3;

    }, 500);
  }
})
$(".image").mouseout(function() {

  if (t) {
    clearInterval(t);
    t = null;
  }

  $image.attr('src', 'http://i.stack.imgur.com/Ho1KD.jpg');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img class="image" src="http://i.stack.imgur.com/Ho1KD.jpg">

5
  • Скажите, а что отвечает за скорость? setInterval(... ,500); ?
    – Plush
    22 ноя 2015 в 10:19
  • @Plush, всё верно. 500 в миллисекундах указывает скорость смены кадров (картинок)
    – LEQADA
    22 ноя 2015 в 16:45
  • @NickVolynkin, попробовал на Yosemite, Firefox 43 - работает нормально. Если положить курсор на div, то начинается анимация.
    – LEQADA
    23 ноя 2015 в 14:27
  • @NickVolynkin, вас, наверное, смутил тот факт, что анимация работает на весь div, а не только img. Поставил класс на img. Теперь будет работать только на картинке.
    – LEQADA
    23 ноя 2015 в 14:47
  • Давайте продолжим обсуждение в чате.
    – LEQADA
    23 ноя 2015 в 14:53
1

На на порядок проще можно сделать и простым css используя animation и его параметр steps. Вот пример:

<div class="imgframe">
</div>

.imgframe {
  background: url(http://mintdesigncompany.com/wp-content/themes/mintymint/imgs/portfolio/work-edge-t-l.png);
  width: 100px;
  height: 125px;
  background-size: cover;
  -webkit-animation: moving 3s steps(24) infinite;
  animation: moving 3s steps(24) infinite
}

@-webkit-keyframes moving {
  from { background-position: 0; }
  to { background-position: -100%; }
}

@keyframes moving {
  from { background-position: 0; }
  to { background-position: -100%; }
}

3
  • То есть для нормальной работы вашего примера достаточно выставить несколько скриншотов в ряд на одной картинке?
    – Plush
    22 ноя 2015 в 10:21
  • Да. Почему бы и нет?
    – NeedH8
    22 ноя 2015 в 13:39
  • Здесь не хватает анимации именно на hover, а не просто анимации. 13 дек 2016 в 20:47
1

Решение на чистом CSS, работает только в webkit-браузерах, так как анимация свойства background-image поддерживается только там:

.image {
  background-image: url(http://i.stack.imgur.com/Ho1KD.jpg);
  width: 200px;
  height: 200px;
  background-size: cover;
}

.image:hover {
  animation: moving 3s 1s infinite;
}

@keyframes moving {
  0% { background-image: url("http://i.stack.imgur.com/y7lKj.jpg"); }
  50% { background-image:  url("http://i.stack.imgur.com/Utqdx.jpg"); }
  100% { background-image: url("http://i.stack.imgur.com/Pj16W.jpg") }
}
<div class="image">
</div>

6
  • анимация не срабатывает
    – Plush
    13 дек 2016 в 20:40
  • @Plush у меня работает всё при hover, странно. 13 дек 2016 в 20:43
  • @Plush а какой браузер? 13 дек 2016 в 20:44
  • Открывал в Firefox
    – Plush
    13 дек 2016 в 21:07
  • @Plush В Chrome всё работает, сейчас гляну в Firefox 13 дек 2016 в 21:30

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.