Grow your CSS skills. Land your dream job.

Css3 or JS

  • # June 24, 2012 at 9:04 pm

    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!

    # June 25, 2012 at 12:48 am

    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);
    });
    };
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".