Спасибо. Подскажи пожалуйста почему он не уменьшается при изменении экрана? Как сделать бесконечную пингпонг анимацию? (Когда анимация нарисована только в одну сторону)
Урок был посвящён анимации патерна. И пример, как можно эту анимацию реализовать. Тут нет адаптации к мобильным устройствам, так как это вообще другая тема. Адаптировать можете любым способом. Чтобы сделать анимацию персонажа в одну, а потом в другую сторону, нужно добавить еще одну контрольную точку в анимации и когда персонаж идет в другую сторону нужно отражать персонажа по горизонтали.
Вроде всё сделала по уроку, НО у меня почему-то во время движения картинки (спрайт другой выбрала) вылазит обрезанная часть предыдущего/следующего слайда. Не могу понять что не так? Ширину неправильно задала? Но вроде игралась с ней и больше и меньше делала, но все равно какая-то фигня получается((( Что не так может быть?
Автор, привет! А сможешь мне скинуть готовое фото этих Смурфиков? Я полтора часа сидел и пытался сделать нормал но обрезанную фото, но не получилось... Мне бы эта фотка очень помогла. Заранее спасибо!
А как можно сделать резку смену кадра? У меня все изображения объединены в спрайт вертикальный и выходит так, будто это слайдер. А я хочу что-бы позиция менялась резко, но временной промежуток между сменой кадров был 0.4s
ещё ангел ходит с смурфиком, только эти милашки в одну сторону ходют. ангела в фотошопе отразил горизонтально и animation-direction: reverse; и все 16 ангелов полетели налево, хотел одного, а не 16.
Отразить можно и с помощью css. Чтобы ангел ходил один, нужно применить эти действия только к одному ангелу. Например, сделать его отдельным изображением.
Что делать если всё как бы работает, но спрайт не меняется. Т.е у меня котик должен бегать ,и ,соответственно должна меняться картинка выдавая бегущего кота (или как у вас идущего гнома), но этого не происходит, одна и та же картинка кота просто бесконечно двигается! Вот код: .sprite-container { height: 100vh; display: flex; align-items: center; } .sprite-image { width: 220px; height: 140px; background: url(CAts.png) 0px 0px; animation: move 5s linear infinite, play 5s steps(1000) infinite; position: absolute; left: 0; } @keyframes play { 100% { background-position: -1105px; } } @keyframes play { 100% { left: 100%; } }
Ты крут! Лучший блогер по css, все задания сделал! И сохранил) жаль что канал забросил, ты лучший учитель, СПАСИБО!!!
Очень хорошо и подробно объяснил. Спасибо за видео. Лайк
Пожалуйста!
Супер! Спасибо 👍
Спасибо большое, за классный видос!)
Пожалуйста
Получилось, спасибо за видео!)
Я очень рад. Пожалуйста.
Отличный урок.!!! Спасибо
Пожайлуйста =)
где находить спрайты что бы они шли в одну сторону а не в ряды?
супер!
Спасибо!
Спасибо.
Подскажи пожалуйста почему он не уменьшается при изменении экрана?
Как сделать бесконечную пингпонг анимацию? (Когда анимация нарисована только в одну сторону)
Урок был посвящён анимации патерна. И пример, как можно эту анимацию реализовать. Тут нет адаптации к мобильным устройствам, так как это вообще другая тема. Адаптировать можете любым способом. Чтобы сделать анимацию персонажа в одну, а потом в другую сторону, нужно добавить еще одну контрольную точку в анимации и когда персонаж идет в другую сторону нужно отражать персонажа по горизонтали.
Что делать ,если у меня картинка трехэтажная ( эффект взрыва ) и анимация идет сверху вниз ,как сделать ,чтобы смена кадров шла горизонтально
Смещение спрайта можно задавать любое. В свойствах анимации.
Вроде всё сделала по уроку, НО у меня почему-то во время движения картинки (спрайт другой выбрала) вылазит обрезанная часть предыдущего/следующего слайда. Не могу понять что не так? Ширину неправильно задала? Но вроде игралась с ней и больше и меньше делала, но все равно какая-то фигня получается((( Что не так может быть?
Если скинете код и спрайт могу посмотреть. А так очень сложно сказать.
Прикольно, спасибо!
Пожалуйста
@@m010k0 подскажите пожалуйста, что дописать в код, чтобы анимация срабатывала когда на нее наводишь курсор?
Стили анимации прописать для состояния :hover
@@m010k0 спасибо!) работает
Автор, привет! А сможешь мне скинуть готовое фото этих Смурфиков? Я полтора часа сидел и пытался сделать нормал но обрезанную фото, но не получилось... Мне бы эта фотка очень помогла. Заранее спасибо!
👍
Спасибо=)
А как можно сделать резку смену кадра?
У меня все изображения объединены в спрайт вертикальный и выходит так, будто это слайдер.
А я хочу что-бы позиция менялась резко, но временной промежуток между сменой кадров был 0.4s
Salam aleykum(мир вам), как сайт называется каторый вы начало видео показывайте .
Яндекс картинки)))
как сделать , чтобы смурфик ходил направо и налево ?
Поменяйте направление анимации и отрозите картинку по горизонтали.
ещё ангел ходит с смурфиком, только эти милашки в одну сторону ходют. ангела в фотошопе отразил горизонтально и animation-direction: reverse; и все 16 ангелов полетели налево, хотел одного, а не 16.
Отразить можно и с помощью css. Чтобы ангел ходил один, нужно применить эти действия только к одному ангелу. Например, сделать его отдельным изображением.
Что делать если всё как бы работает, но спрайт не меняется. Т.е у меня котик должен бегать ,и ,соответственно должна меняться картинка выдавая бегущего кота (или как у вас идущего гнома), но этого не происходит, одна и та же картинка кота просто бесконечно двигается!
Вот код:
.sprite-container {
height: 100vh;
display: flex;
align-items: center;
}
.sprite-image {
width: 220px;
height: 140px;
background: url(CAts.png) 0px 0px;
animation: move 5s linear infinite, play 5s steps(1000) infinite;
position: absolute;
left: 0;
}
@keyframes play {
100% {
background-position: -1105px;
}
}
@keyframes play {
100% {
left: 100%;
}
}
Пытаюсь сделать другой спрайт. Но картинка почему как-бы приподнимается. Кто-нибудь знает почему так?
К каждому спрайту нужно подбирать параметры анимации.