0

Quisiera que cuando la url cambie lo hago con un efecto mas leve no muy fuerte mi código

imagenes = ["fondo1.jpg", "fondo2.jpg", "fondo3.jpg"];
    function cambiarFondo() {
        document.body.style.backgroundImage = "url(assets/img/backgrounds/" + 
        imagenes[++fondoActual % imagenes.length] + ")";
     }
2
  • 1
    Podrías explicar mejor que es lo que quieres?. el 27 dic. 2017 a las 14:29
  • cambia el fondo pero lo hace sin efecto
    – Cesar
    el 27 dic. 2017 a las 14:30

2 respuestas 2

2

La propiedad background-image no es transicionable acorde al estándar CSS3. Una solución cross-browser implicaría simular el efecto que quieres usando un contenedor auxiliar que fuera transicionando su opacidad.

Sin embargo, en algunos browsers sí se puede hacer el intento. La siguiente solución funciona por ejemplo en Chrome mientras que en FF no tiene ningún efecto.

var backgrounds=[
'https://image.flaticon.com/icons/svg/197/197573.svg',
'https://image.flaticon.com/icons/svg/197/197586.svg',
'https://image.flaticon.com/icons/svg/197/197593.svg',
];

var counter=0;
var changeBackground=function() {
  var position=counter%backgrounds.length,
      img = backgrounds[position];
      
  jQuery('#contenedor').css('background-image','url('+img+')');
  counter++;
  window.setTimeout(function() {
     changeBackground();
  },3000);
};
jQuery(document).ready(function() {
   changeBackground();
});
#contenedor {
width:256px;
height:256px;
background-image: url(https://image.flaticon.com/icons/svg/197/197593.svg);
-webkit-transition: background-image 500ms ease-in 400ms;
-moz-transition: background-image 500ms ease-in 400ms;
-o-transition: background-image 500ms ease-in 400ms;
transition: background-image 500ms ease-in 400ms;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contenedor">
</div>

La solución Cross-Browser usando un elemento auxiliar y transicionando su opacidad con jQuery.animate:

  • Tener un div con el fondo deseado
  • Tener un elemento hijo con posición absoluta, opacidad cero, ocupando todo el div y con el mismo fondo
  • Cambiar la opacidad del elemento auxiliar a 1
  • Cambiar el fondo del div a la nueva imagen deseada (no se ve, porque el elemento auxiliar la cubre)
  • Transicionar la opacidad del elemento auxiliar a cero
  • Fijar el fondo del elemento auxiliar a la nueva imagen.

var backgrounds=[
'https://image.flaticon.com/icons/svg/197/197573.svg',
'https://image.flaticon.com/icons/svg/197/197586.svg',
'https://image.flaticon.com/icons/svg/197/197593.svg',
];

var counter=0, img=backgrounds[0];
var changeBackground=function() {
  var position=counter%backgrounds.length;
      
  jQuery('#contenedor-aux').css('opacity',1);    
  
  img = backgrounds[position];
  jQuery('#contenedor').css('background-image','url('+img+')');
  $( "#contenedor-aux" ).animate({
    opacity: 0,
  }, 1000, function() {
      jQuery('#contenedor-aux').css('background-image','url('+img+')');
  });
  counter++;
  window.setTimeout(function() {
     changeBackground();
  },3000);
};
jQuery(document).ready(function() {
   jQuery('#contenedor-aux').css('background-image','url('+img+')');
   changeBackground();
});
#contenido {
position:relative;
z-index:2;
}
#contenedor-aux {

position:absolute;
height:100%;
width:100%;
top:0;
left:0;
pointer-events:none;
z-index:1;
}
#contenedor {
  position:relative;
  width:256px;
  height:256px;
  text-align:center;
  padding:3px;
  background-image: url(https://image.flaticon.com/icons/svg/197/197593.svg);
}
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="contenedor">
  <div id="contenido">
    <h2>Titulo</h2>
    <a href="#">Link</a>
  </div>
  <div id="contenedor-aux">
  </div>
</div>

Esto se puede hacer con puro CSS3 sin recurrir a jQuery.animate, pero habría que jugar más con mi fragmento de código hasta que funcionara acorde a lo deseado.

1

Para realizar lo que quieres solo basta con colocar la propiedad transition de CSS al elemento:

imagenes = ["https://estaticos.muyinteresante.es/uploads/images/article/59f05d995cafe8dd5a3c9869/universo-no-existe_0.jpg", "https://www.jpl.nasa.gov/spaceimages/images/wallpaper/PIA03519-1920x1200.jpg", "http://r.ddmcdn.com/s_f/o_1/DSC/uploads/2015/04/hubble-birthday-banner.jpg"];

var fondoActual = 0;

function cambiarFondo() {
    document.body.style.backgroundImage = "url(" + 
    imagenes[++fondoActual % imagenes.length] + ")";
 }
body{
  background-image: url("https://estaticos.muyinteresante.es/uploads/images/article/59f05d995cafe8dd5a3c9869/universo-no-existe_0.jpg");
  transition: all 0.5s;
}
<button onclick="cambiarFondo();">Cambiar fondo</button>

1
  • 1
    Las transiciones de background-image no funcionan en Firefox.
    – azeós
    el 27 dic. 2017 a las 14:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.