smoke effect

[anson.c]

I like the moving background effect on this site http://www.shadesone.com

Anyone knows how to create such effect?

 

Thanks!

[psexplore]

in this template they are using two images

 

http://www.shadesone.com/wp-content/themes/boooster/css/dark-red/img/smoke1.png

http://www.shadesone.com/wp-content/themes/boooster/css/dark-red/img/smoke2.png

 

and using the below js for animation effect

 

 

$(document).ready(function(){

 

////// SMOKE ANIMATION //////////////////////////////////////////

 

$('body').append('<div id="smoke1"></div><div id="smoke2"></div>');

 

setInterval("bloooming_smoke('smoke1','smoke2')", 50);

});

 

 

var here = 0;

var here2 = 0;

var imageWidth = 300;

var bodyWidth = jQuery('html').width();

 

var startPos = -(imageWidth - bodyWidth);

 

function bloooming_smoke(element1, element2){

 

here += 1;

here2 += 2;

 

if (here == startPos){

here = 0;

}

if (here2 == startPos){

here2 = 0;

}

 

if (!$.browser.msie){

$('#'+ element1).fadeIn(5000);

$('#'+ element2).fadeIn(5000);

}

else {

$('#'+ element1).show();

$('#'+ element2).show();

}

 

$('#'+ element1).css("background-position", here+"px -50px");

$('#'+ element2).css("background-position", here2+"px 0");

 

}

 

 

And below is the css used.

 

 

 

 

#smoke1 {

 

 

background: url("img/smoke1.png") repeat-x scroll 0 0 transparent;

}

 

 

 

#smoke1 {

 

 

display: none;

height: 700px;

left: 0;

position: absolute;

top: 0;

width: 100%;

z-index: 1;

}

 

 

 

 

 

 

#smoke2 {

 

 

background: url("img/smoke2.png") repeat-x scroll 0 0 transparent;

}

 

 

 

#smoke2 {

 

 

display: none;

height: 700px;

left: 0;

position: absolute;

top: 0;

width: 100%;

z-index: 1;

}

[Dh42]

It is just using jquery, first there is a face, then moving. Here is an example of the fade that I made. http://neat42.com/js-fade/

[anson.c]

Sweet! I'm just wondering where should I insert or save those js?