Deutsch

Анимированный банер

264  
Ivan_Pomidoroff коренной житель22.10.17 14:38
Ivan_Pomidoroff
22.10.17 14:38  Анимированный банер

Ребята, подскажите как можно сделать банер из трёх-четырёх картинок чтобы они меняли друг друга. На HTML и CSS?

Sergo2008 коренной житель23.10.17 07:32
Sergo2008
23.10.17 07:32  Re: Анимированный банер

Задай в поисковике - "css slideshow" или "css карусель", ну или - "css автоматическая смена картинок", и найдёшь разные, примеров хватает. Вот для примера простой - https://jsfiddle.net/7qawg88e/2/


Так же есть бесплатный "гугло-банеро-конструктор" - https://www.google.com/webdesigner/, делает банеры на чистом хтмл и ксс, в замен устаревшему флэшу.


Ну и мож почитать в сторону ксс анимации.

Ivan_Pomidoroff коренной житель23.10.17 11:53
Ivan_Pomidoroff
23.10.17 11:53  Re: Анимированный банер

Спасибо Sergo, то что надо!

Ivan_Pomidoroff коренной житель29.10.17 12:50
Ivan_Pomidoroff
29.10.17 12:50  Re: Анимированный банер
Задай в поисковике - "css slideshow" или "css карусель", ну или - "css автоматическая смена картинок", и найдёшь разные, примеров хватает. Вот для примера простой - https://jsfiddle.net/7qawg88e/2/

всё хорошо но в конце какойто затык у анимации последнюю картинку он показывает в 2 раза дольше. немогу вкурить как поправить. меняю временные интервалы - всякая муть выходит а не то что надо.


Как это побороть?

Sergo2008 коренной житель30.10.17 08:48
Sergo2008
30.10.17 08:48  Re: Анимированный банер

Я привёл первый попавшийся пример, там как я вижу, интервалы заданы не корректно, поэтому так и выходит.

Вот, попробуй так: https://jsfiddle.net/2owv56nu/

Я задал один цвет всем блокам, что бы было видно что всё чётко отрабатывает, так как на разноцвете переход кажется не одинаковый. Ну и время увеличил, что бы не так быстро было, что бы разглядеть можно было.

В общем можешь сам дальше поиграться с процентами для @keyframes fade, от них зависит как будет меняться, каждый отдельный слайд.

Можешь так же поискать, я где то в сети видал уже готовые слайдеры по этой схеме, с точными настройками, и расчётами, как и что правильно считать...



Ivan_Pomidoroff коренной житель30.10.17 22:55
Ivan_Pomidoroff
30.10.17 22:55  Re: Анимированный банер

не совсем понял как этот @keyframes fade работает, но методом тыка получилось с его помощью выровнять анимашку


@keyframes fade {

12% { opacity: 1; }

24% { opacity: 1; }

36% { opacity: 0; }

48% { opacity: 0; }

}


бля, тупо цифры перебирал! )

Перейти на