HTML/CSS/JS Показать GIF при наведении, что такое GIF?

У меня есть много элементов div, которые я вытягиваю, и у каждого из них есть фоновое изображение. Однако некоторые элементы представляют собой gif, и когда я навожу на них указатель мыши, я хочу воспроизвести gif и остановить или сбросить его при выходе из мыши.

Я вижу много примеров анимации gif с тегом изображения, но не могу заставить ее работать с фоновым изображением.

Итак, для каждого изображения у меня есть начальное изображение для gif, а также расширение .gif для полного содержимого.

Я читаю этот вопрос здесь для справки: Start GIF On Mouse Hover and Pause Иначе?

что подводит меня к моему вопросу: что такое gif?

Это набор изображений меньшего размера для "анимации"? Я вижу много терминологии «нарезка изображения» или наличие нескольких изображений, которые циклически повторяются для имитации анимации. Но можно ли показать gif через html/css/js только с начальным изображением и URL-адресом .gif?

$container.on('mouseenter', ".gif", function (event) {
        var target = event.target;
        var $target = $(target);

        //play gif
        $target.css("background-image", "url(" + theGIFurl + ")");
    });
.item gif{

  background-image: url(theJPGurl); /

}


javascript image html css gif
person Pipeline    schedule 30.12.2015    source источник
comment
ajaxload.info | preloaders.net   -  person zer00ne    schedule 31.12.2015
comment
Не относится к вопросу   -  person Pipeline    schedule 31.12.2015
comment
Файл изображения в формате gif может содержать 1 или несколько изображений. Если файл содержит несколько изображений, программа, которая понимает это (например, большинство браузеров), циклически перебирает серию изображений. Не существует хорошего способа контролировать этот цикл в браузере, поэтому, если вам нужен как анимированный вид, так и статический вид, вам нужно будет иметь 2 файла изображений (один статический и один анимированный) и переключаться между ними.   -  person John Hascall    schedule 31.12.2015
comment
@Pipeline Вы спросили, что такое гифка?   -  person zer00ne    schedule 31.12.2015
comment
Вы должны без проблем установить GIF в качестве фонового изображения с помощью HTML или CSS. Однако надежного кросс-браузерного решения для их воспроизведения/остановки не существует. Можем ли мы получить больше информации о том, что вы пытаетесь сделать?   -  person Lionel Ritchie the Manatee    schedule 31.12.2015
comment
Создание веб-сайта с галереей изображений, где некоторые изображения представляют собой гифки, которые я хочу воспроизводить при наведении курсора. Решение не обязательно должно поддерживать IE   -  person Pipeline    schedule 31.12.2015
comment
GIF — это тип изображения, которое можно анимировать, имея в файле несколько изображений и некоторую дополнительную информацию о времени. Но вы также можете анимировать с помощью CSS или JavaScript. Однако изображение в формате gif не является смарт-объектом, которым можно управлять. Вы не можете запустить, остановить, приостановить или ускорить изображение gif с помощью JavaScript. Он просто содержит кадры и может быть зациклен или нет, но вся эта информация находится в файле.   -  person GolezTrol    schedule 31.12.2015
comment
Итак, из URL-адреса .gif невозможно извлечь изображения?   -  person Pipeline    schedule 31.12.2015

Ответы (3)


arrow_upward
1
arrow_downward

GIF — это тип растрового изображения. Раньше он был очень популярен, потому что может иметь прозрачные пиксели (в отличие от jpg). Но в этом отношении его заменяет png, который, как правило, меньше, поддерживает альфа-прозрачность (где пиксели gif либо полностью прозрачны, либо полностью непрозрачны), и, что наиболее важно, изображения gif ограничены 256 цветами.

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

Анимированное изображение в формате gif — это просто набор изображений, объединенных в один файл. Такой файл также содержит дополнительную информацию о времени в файле. Однако изображение в формате gif не является смарт-объектом, которым можно управлять. Вы не можете запустить, остановить, приостановить или ускорить изображение gif с помощью JavaScript. Он просто содержит кадры и может быть зациклен или нет, но вся эта информация находится в файле.

Таким образом, хотя вы можете анимировать с помощью JavaScript или CSS, показывая разные изображения, это другой метод, чем просто показ анимированного gif. Так что, возможно, лучше изучить другие методы. Хотя GIF в основном очень просты, они также очень ограничены в своем использовании. Например, вы не можете надежно рассчитать время запуска скрипта в конце GIF-анимации.

-редактировать-

По-видимому, вы можете (в FireFox) приостановить файл gif.

person GolezTrol    schedule 30.12.2015
comment
Таким образом, просто имея изображение начального кадра, а также URL-адрес .gif, невозможно отобразить gif в браузере? - person Pipeline; 31.12.2015
comment
Не легко, но с подходящей библиотекой вы можете добраться туда - person GolezTrol; 31.12.2015
comment
Возможно, стоит отметить, что PNG также можно анимировать, хотя в настоящее время только Safari и Firefox предлагают стабильную встроенная поддержка и что GIF могут иметь более 256 цветов, поскольку пример из Википедии доказывает. - person Siguza; 31.12.2015
comment
@Сигуза Верно. В анимированных GIF-файлах кадры просто заменяют друг друга, оставляя предыдущий кадр видимым, когда пиксели прозрачны. Ограничение в 256 цветов на самом деле на кадр, поэтому, используя хитрость, вы можете разбить изображение на несколько кадров без времени на анимацию, и каждый кадр будет иметь собственную палитру, содержащую именно те цвета, которые необходимы для этого. часть. Можно, но нужен специализированный софт, а в результате у вас будет огромное изображение. Анимированные PNG были бы хороши, но поддержка оставляет желать лучшего, хотя стандарту уже 8 лет. Впрочем, приятно упомянуть. - person GolezTrol; 31.12.2015

arrow_upward
0
arrow_downward

Если бы кто-нибудь мог прокомментировать, я нашел этот пример, который решает эту проблему:

http://codepen.io/anon/pen/qbqvgy

div {
  width: 500px;
  height: 500px;
  background: url('http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg');
}

div:hover {
  background: url('https://media.giphy.com/media/V1T2JBmK03OFy/giphy.gifs');
}
<div>
</div>

person Pipeline    schedule 31.12.2015

arrow_upward

arrow_downward

person    schedule
comment
Это просто копирование того, что у меня было в ОП - person Pipeline; 31.12.2015