css background-image changing with animation

Question

I tried to change my background image with the following code

$('#mask').css({'background-image' : 'url('changingVar')', 
    'background-repeat' : 'no-repeat',  
    'background-position': 'center',
    'background-size': 'cover',         
});

and having a setTimeout for the waiting time.

However I want a changing animation kinda like : http://www.luckywok.at

The problem is when I use fadeout and fadeIn it's fading out and in my complete screen, since I have a wrapper DIV (#Mask) around everything.

Does anyone have an idea what methods were used on that particular site?

typically you would stack a bunch of images on top of each other using z-index / absolute positioning, and then fade those in and out. — Brian Glaz
– Brian Glaz, Commented Jan 13, 2014 at 20:02
There are some jquery plugin that you can use to do these kind of background effects : jquery4u.com/plugins/… — Merlin
– Merlin, Commented Jan 13, 2014 at 20:03
change 'url('changingVar')' to 'url(' + changingVar + ')'. Also, you should probably pick a better variable name than changingVar. — MattDiamant
– MattDiamant, Commented Jan 13, 2014 at 20:03

voodoo417 · Accepted Answer · 2014-01-13 21:09:49Z

2

Simple solution.

Fullscreen : http://jsfiddle.net/9GwNG/3/show/

jsfiddle : http://jsfiddle.net/9GwNG/3/

// code was written in a hurry
//
var step = 1;

function bg(){
 var opacity = 0.0;
 if (step == 3){
  n = 3;
  step = 1;
  opacity = 1.0;
  $("#item_"+step).animate({'opacity':opacity},2000);     
  $("#item_"+n).animate({'opacity': 0.0},2000);
  return;     
}
  n = step+1;
  $("#item_"+step).animate({'opacity':opacity},2000);
  $("#item_"+n).animate({'opacity':1.0},2000);
  step = n;
}

function loop(){
 setInterval(bg,4000);    
}

setTimeout(loop,500);

edited Jan 13, 2014 at 21:09

answered Jan 13, 2014 at 21:00

voodoo417

12.2k3 gold badges39 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

pictus · Accepted Answer · 2014-01-13 20:21:04Z

0

Just use CSS- Transitions and a setInterval function. http://jsbin.com/ugERaZO/1/edit

Transitions are support for > ie9 see caniuse.

answered Jan 13, 2014 at 20:21

pictus

771 silver badge6 bronze badges

Collectives™ on Stack Overflow

css background-image changing with animation

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related