treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Css3 or JS

  • 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!
  • 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);
    });
    };