CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3191639
user3191639

Reputation: 1

css background-image changing with animation

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?

Upvotes: 0

Views: 5047

Answers (2)

voodoo417
voodoo417

Reputation: 12111

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);

Upvotes: 2

pictus
pictus

Reputation: 77

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

Transitions are support for > ie9 see caniuse.

Upvotes: 0

Related Questions