Deutsch

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

243  
Ivan_Pomidoroff коренной житель22.10.17 14:38
Ivan_Pomidoroff
22.10.17 14:38 

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

#1 
Sergo2008 коренной житель23.10.17 07:32
Sergo2008
NEW 23.10.17 07:32 
в ответ Ivan_Pomidoroff 22.10.17 14:38, Последний раз изменено 23.10.17 07:33 (Sergo2008)

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


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


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

#2 
Ivan_Pomidoroff коренной житель23.10.17 11:53
Ivan_Pomidoroff
NEW 23.10.17 11:53 
в ответ Sergo2008 23.10.17 07:32

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

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

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


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

#4 
Sergo2008 коренной житель30.10.17 08:48
Sergo2008
NEW 30.10.17 08:48 
в ответ Ivan_Pomidoroff 29.10.17 12:50, Последний раз изменено 30.10.17 08:58 (Sergo2008)

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

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

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

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

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


#5 
Ivan_Pomidoroff коренной житель30.10.17 22:55
Ivan_Pomidoroff
NEW 30.10.17 22:55 
в ответ Sergo2008 30.10.17 08:48

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


@keyframes fade {

12% { opacity: 1; }

24% { opacity: 1; }

36% { opacity: 0; }

48% { opacity: 0; }

}


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

#6