O seguinte código faz um "fader de imagens" em uma div
que tenho no meu documento. Porém, o efeito é muito 'seco', gostaria de ter uma transição durante a troca das imagens, tipo o efeito "fade" do jQuery.
var images = ['image-1.jpg','image-2.jpg','image-3.jpg','image-4.jpg','image-5.jpg','image-6.jpg'],
index = 0,
maxImages = images.length - 1;
var timer = setInterval(function() {
var curImage = images[index];
index = (index == maxImages) ? 0 : ++index;
$('.header').css({'background-image':'url(./img/'+curImage+')'});
}, 1500);
Como eu poderia fazer?
Segue um fiddle com um pequeno exemplo.
background-image
- segundo essa resposta no SOen, não há propriedades customizáveis nobackground-image
, então você vai ter que "simular" um background usando um outro elemento (e nesse sim, aplicar efeitos de transição).