Имеется несколько screenshot'ов нарезанных из видеоролика, каким образом можно сложить из них анимированную картинку, которая бы запускалась только при наведении курсора?
Приоритет: CSS, JS, все остальное
-
иди читай что такое слайдер– Peter Lavreniuk21 ноя 2015 в 15:23
-
@ParanoidPanda мне известно что такое слайдер, а еще кажется что это можно сделать без использования громоздкого кода– Plush21 ноя 2015 в 15:25
Добавить комментарий
|
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">
-
-
@Plush, всё верно. 500 в миллисекундах указывает скорость смены кадров (картинок)– LEQADA22 ноя 2015 в 16:45
-
@NickVolynkin, попробовал на Yosemite, Firefox 43 - работает нормально. Если положить курсор на div, то начинается анимация.– LEQADA23 ноя 2015 в 14:27
-
@NickVolynkin, вас, наверное, смутил тот факт, что анимация работает на весь
div
, а не толькоimg
. Поставил класс наimg
. Теперь будет работать только на картинке.– LEQADA23 ноя 2015 в 14:47 -
На на порядок проще можно сделать и простым 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%; }
}
-
То есть для нормальной работы вашего примера достаточно выставить несколько скриншотов в ряд на одной картинке?– Plush22 ноя 2015 в 10:21
-
-
Здесь не хватает анимации именно на hover, а не просто анимации. 13 дек 2016 в 20:47
Решение на чистом 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>