Анимация спрайта на CSS на примере персонажа.

В данном виде мы научимся анимировать спрайты на примере анимации персонажа. С помощью спрайтов можно добавить любой визуальный эффект на сайт.
Все исходные материалы Вы можете посмотреть по ссылке:
antonaniskovic...
🤲 Поддержать канал, и получить бонусы (Патрион):
/ aniskovich
🌐 Мой сайт:
antonaniskovic...
🔥 Я в соц. сетях:
/ aniskweb
m010k0

[@user-jc6pl2xj7k]

Ты крут! Лучший блогер по css, все задания сделал! И сохранил) жаль что канал забросил, ты лучший учитель, СПАСИБО!!!

[@ДмитрийВолокитин-я8ф]

Очень хорошо и подробно объяснил. Спасибо за видео. Лайк

[@m010k0]

Пожалуйста!

[@piratplay4689]

Спасибо большое, за классный видос!)

[@m010k0]

Пожалуйста

[@emelya4931]

Получилось, спасибо за видео!)

[@m010k0]

Я очень рад. Пожалуйста.

[@katerinakivisheva4659]

Отличный урок.!!! Спасибо

[@m010k0]

Пожайлуйста =)

[@ЕленаКоролева-у5ь]

👍

[@m010k0]

Спасибо=)

[@АминаМерзамедова]

где находить спрайты что бы они шли в одну сторону а не в ряды?

[@niknike5108]

супер!

[@m010k0]

Спасибо!

[@3dportableinc64]

Спасибо. Подскажи пожалуйста почему он не уменьшается при изменении экрана? Как сделать бесконечную пингпонг анимацию? (Когда анимация нарисована только в одну сторону)

[@m010k0]

Урок был посвящён анимации патерна. И пример, как можно эту анимацию реализовать. Тут нет адаптации к мобильным устройствам, так как это вообще другая тема. Адаптировать можете любым способом. Чтобы сделать анимацию персонажа в одну, а потом в другую сторону, нужно добавить еще одну контрольную точку в анимации и когда персонаж идет в другую сторону нужно отражать персонажа по горизонтали.

[@moto_venom]

А как можно сделать резку смену кадра? У меня все изображения объединены в спрайт вертикальный и выходит так, будто это слайдер. А я хочу что-бы позиция менялась резко, но временной промежуток между сменой кадров был 0.4s

[@my_life_is_good]

Прикольно, спасибо!

[@m010k0]

Пожалуйста

[@my_life_is_good]

@@m010k0 подскажите пожалуйста, что дописать в код, чтобы анимация срабатывала когда на нее наводишь курсор?

[@m010k0]

Стили анимации прописать для состояния :hover

[@my_life_is_good]

@@m010k0 спасибо!) работает

[@ledfed4318]

Что делать ,если у меня картинка трехэтажная ( эффект взрыва ) и анимация идет сверху вниз ,как сделать ,чтобы смена кадров шла горизонтально

[@m010k0]

Смещение спрайта можно задавать любое. В свойствах анимации.

[@katerinakivisheva4659]

Вроде всё сделала по уроку, НО у меня почему-то во время движения картинки (спрайт другой выбрала) вылазит обрезанная часть предыдущего/следующего слайда. Не могу понять что не так? Ширину неправильно задала? Но вроде игралась с ней и больше и меньше делала, но все равно какая-то фигня получается((( Что не так может быть?

[@m010k0]

Если скинете код и спрайт могу посмотреть. А так очень сложно сказать.

[@anella1987]

Salam aleykum(мир вам), как сайт называется каторый вы начало видео показывайте .

[@m010k0]

Яндекс картинки)))

[@user-abuzer-]

Пытаюсь сделать другой спрайт. Но картинка почему как-бы приподнимается. Кто-нибудь знает почему так?

[@m010k0]

К каждому спрайту нужно подбирать параметры анимации.

[@user-jx4zj6ds7h]

как сделать , чтобы смурфик ходил направо и налево ?

[@m010k0]

Поменяйте направление анимации и отрозите картинку по горизонтали.

[@user-jx4zj6ds7h]

ещё ангел ходит с смурфиком, только эти милашки в одну сторону ходют. ангела в фотошопе отразил горизонтально и animation-direction: reverse; и все 16 ангелов полетели налево, хотел одного, а не 16.

[@m010k0]

Отразить можно и с помощью css. Чтобы ангел ходил один, нужно применить эти действия только к одному ангелу. Например, сделать его отдельным изображением.