Change the url of css with delay

Question

Change the url of css with delay

Navigation

#1 by (2 votes)
#2 by (1 votes)

0

I would like that when the url change I do it with a lighter effect not very strong my code

imagenes = ["fondo1.jpg", "fondo2.jpg", "fondo3.jpg"];
    function cambiarFondo() {
        document.body.style.backgroundImage = "url(assets/img/backgrounds/" + 
        imagenes[++fondoActual % imagenes.length] + ")";
     }

javascript css

asked by Cesar 27.12.2017 в 15:23

source

2 answers

Replace data in an array JavaScript Array Format

score 2 · Answer 1

The property background-image is not transitions according to the standard CSS3. A cross-browser solution would involve simulating the effect you want using an auxiliary container that transitions its opacity.

However, in some browsers the attempt can be made. The following solution works for example in Chrome while in FF has no effect .

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>

The Cross-Browser solution using an auxiliary element and transitioning its opacity with jQuery.animate :

Have a div with the desired background
Have a child element with absolute position, zero opacity, occupying all the div and with the same background
Change the opacity of the auxiliary element to 1
Change the background of the div to the new desired image (you can not see it, because the auxiliary element covers it)
Transpose the opacity of the auxiliary element to zero
Fix the background of the auxiliary element to the new image.

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>

This can be done with pure CSS3 without resorting to jQuery.animate, but you should play more with my code fragment until it works according to your wishes.

score 1 · Answer 2

To do what you want, just put the transition property of CSS to the element:

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>