Grow your CSS skills. Land your dream job.

Nice Txt Fade that i’m interested in

  • # June 15, 2010 at 3:25 pm

    Dear Forums,

    I found this cool txt fade/ color fade thing on a site and i am very interested in learning to recreate.
    the site is:

    http://knauth.cc/

    (txt fade in footer at the bottom)

    i tried checking the code out but couldn’t find what i needed. Maybe someone here knows how this effect works?

    Thanks all who look into this.
    -jaime

    # June 15, 2010 at 6:34 pm

    You could do it like this:

    Code:
    $(“ul”).css(“opacity”, “0.1″).hover(function(){
    $(this).fadeTo(400, 1);
    }, function(){
    $(this).fadeTo(400, 0.1);
    });
    # June 17, 2010 at 4:14 am

    Hi elneco,

    I’m very pleased that you like my site! ;)

    I use jQuery:

    Code:
    $(‘.footer_infoData’)
    .mouseenter(function() { $(this).find(‘li, li a’).stop().animate({ color: ‘#9DC153′ }, 500); })
    .mouseleave(function() { $(this).find(‘li, li a’).stop().animate({ color: ‘#071F09′ }, 500); });

    Works with all major Browsers.

    # June 17, 2010 at 10:03 am
    Quote:
    I use jQuery:

    Code:
    $(‘.footer_infoData’)
    .mouseenter(function() { $(this).find(‘li, li a’).stop().animate({ color: ‘#9DC153′ }, 500); })
    .mouseleave(function() { $(this).find(‘li, li a’).stop().animate({ color: ‘#071F09′ }, 500); });

    Works with all major Browsers.

    You will have to include some kind of jQuery color transition plugin, because stand alone jQuery can’t animate one colour to another by itself.

    # June 17, 2010 at 9:41 pm

    For animating color you could use the jQuery UI or this jquery plugin http://plugins.jquery.com/project/color

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

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