Как на слинки заливается так фон для гифки?

Question

[kuponibesplatno]

Коллеги привет.

Интересует вопрос, как на слинках так заливается автоматом фон для гиф анимации ? Просто понравился этот момент и думаем сделать для себя что-то такое на картинках с товарами. Я бы даже сказал, что он меня порадовал и особенно, как от тёмного заливается нужный цвет.
slinky.me/Kwc
slinky.me/Hyc

Как сделать то так? Прям представляю, как фото товара будем заливать подходящим цветом на полный экран. Будет фокус на товаре и это будет круто смотрится аля Full скрин

заранее спасибо

Answer 1

[Тимур Яхин]

Используется свойство css transition
В примере выглядит так:

transition: all 0.85s ease;

- то есть все свойства блока, к примеру цвет фона (all) меняются плавно в течении 0,85 секунд с нарастанием вначале и убыванием в конце скорости изменения (ease).

Если использовать для фото товаров то вначале нужно как нибудь узнать цвет фона фото (к примеру заранее на сервере с помошью php, либо сразу на клиенте с помащью javascript), и потом менять цвет фона блока (с помощью javascript), а плавность изменения обеспечит css.

Comments

[kuponibesplatno]

Звучит легко, а колорпикер подоидет для этого? как узнать цвет подходящии точно? у нас в товарах много цветов.

[Артем Лисовский]

@kuponibesplatno нет. вам нужно на сервере какой-нибудь популярной библиотекой взять один(а лучше несколько, например, четыре) цвет пикселя в углу(углах) изображения. Сравнить их, если несколько, взять наиболее частый результат и его хранить его дополнительно. на клиенте не стоит такое пробовать

[Артем Лисовский]

@kuponibesplatno в примере цвет передается для каждой картинки в дате картинки - data-ab-color="rgb(235,153,37)"

[Артем Лисовский]

@kuponibesplatno по нему и делается заливка фона

[kuponibesplatno]

Черт теперь кажется все сложным. Может есть на python какое-нибудь готовое решение? не знаешь ?