Анимированный банер
Ребята, подскажите как можно сделать банер из трёх-четырёх картинок чтобы они меняли друг друга. На HTML и CSS?
Задай в поисковике - "css slideshow" или "css карусель", ну или - "css автоматическая смена картинок", и найдёшь разные, примеров хватает. Вот для примера простой - https://jsfiddle.net/7qawg88e/2/
Так же есть бесплатный "гугло-банеро-конструктор" - https://www.google.com/webdesigner/, делает банеры на чистом хтмл и ксс, в замен устаревшему флэшу.
Ну и мож почитать в сторону ксс анимации.
Задай в поисковике - "css slideshow" или "css карусель", ну или - "css автоматическая смена картинок", и найдёшь разные, примеров хватает. Вот для примера простой - https://jsfiddle.net/7qawg88e/2/
всё хорошо но в конце какойто затык у анимации последнюю картинку он показывает в 2 раза дольше. немогу вкурить как поправить. меняю временные интервалы - всякая муть выходит а не то что надо.
Как это побороть?
Я привёл первый попавшийся пример, там как я вижу, интервалы заданы не корректно, поэтому так и выходит.
Вот, попробуй так: https://jsfiddle.net/2owv56nu/
Я задал один цвет всем блокам, что бы было видно что всё чётко отрабатывает, так как на разноцвете переход кажется не одинаковый. Ну и время увеличил, что бы не так быстро было, что бы разглядеть можно было.
В общем можешь сам дальше поиграться с процентами для @keyframes fade, от них зависит как будет меняться, каждый отдельный слайд.
Можешь так же поискать, я где то в сети видал уже готовые слайдеры по этой схеме, с точными настройками, и расчётами, как и что правильно считать...
не совсем понял как этот @keyframes fade работает, но методом тыка получилось с его помощью выровнять анимашку
@keyframes fade {
12% { opacity: 1; }
24% { opacity: 1; }
36% { opacity: 0; }
48% { opacity: 0; }
}
бля, тупо цифры перебирал! )