Css3 or JS

[Attila Hajzer]

http://www.canadadry.ca/realmoments/

In the header you will notice images crolling up (bubbles) and just curious how they get the images to fade in! its really neat!

[dfogge]

its done with jquery.

 * JavaScript

*

* FOR NAVIGATION BACKGROUND

* Date: 2012-04-05

* Revision: 00

*/

Drupal.behaviors.rm_bubbles = function(context){

$("#bubble-group-1").everyTime(500, function(){

$("#bubble-group-1").animate({top:"20px", opacity: 0}, 1).animate({top:"-150px", opacity: 1}, 3000);

});



$("#bubble-group-2").everyTime(1500, function(){

$("#bubble-group-2").animate({top:"-20px", opacity: 0}, 1).animate({top:"-290px", opacity: 1}, 4000);

});



$("#bubble-group-3").everyTime(2000, function(){

$("#bubble-group-3").animate({top:"-90px", opacity: 0}, 1).animate({top:"-320px", opacity: 1}, 3000);

});



$("#bubble-group-4").everyTime(200, function(){

$("#bubble-group-4").animate({top:"-125px", opacity: 0}, 1).animate({top:"-315px", opacity: 1}, 1500);

});

};

[Author]

Posts