Gradually changing color

Asked 17/11, 2009 at 17:18 Answered 17/11, 2009 at 17:53

How does the logo in the top left corner of the screen gradually change color as a rollover? I think its done in jquery. If you don't know the code can you point me to a tutorial that can? Thanks.

http://www.shopdev.co.uk/blog/

UPDATE: Thanks everyone, I've posted a working version of the code below,

<html>

    <head>            

        <script type="text/javascript" src="jquery.js"></script>

        <script type="text/javascript">

            $(document).ready(function(){

                // load the logo transition
                $("#logo span").css("opacity","0");
                $("#logo span").css("display","block");
                // logo animation
                $("#logo").hover(function() {
                    $("#logo span").stop().animate({opacity:1},'slow');
                }, function() {
                    $("#logo span").stop().animate({opacity:0},'slow');
                });


            });

        </script>

        <style type="text/css">
            #logo span{
                background: url(logo2.gif) no-repeat scroll center bottom;
                width:257px;
                height:75px;
                position:absolute;
            }
            img{
                border:0;
            }
        </style>

    </head>

    <body>

        <div id="logo"><a href="#"><span></span><img src="logo.gif"/></a></div>

    </body>

</html>

Mastitis answered 17/11, 2009 at 17:18 Comment(2)

Use the View Page Source command in your browser. Look for the words opacity or animate in the result. – Nostradamus 17/11, 2009 at 17:21

You can do it with much less html if you use the jquery-ui library, see my answer. – Keto 17/11, 2009 at 17:54

Did you try looking at the source code to the page? It's an opacity change.

// load the logo transition
$("#logo span").css("opacity","0");
$("#logo span").css("display","block");
// logo animation
$("#logo").hover(function() {
    $("#logo span").stop().animate({opacity:1},'slow');
}, function() {
    $("#logo span").stop().animate({opacity:0},'slow');
});

So an image over another image, with the front one fading in and out gradually. NOT a color change.

Note the warning above the code:

// whoah there...  This source code is copyright ShopDev.  By all means, use this website as a source of inspiration - just don't plagiarize! //

Adlar answered 17/11, 2009 at 17:22 Comment(3)

"An image over another image". Not quite, a span is not an image ;) – Teriann 17/11, 2009 at 17:26

It's an image, just not an img. :-) – Adlar 17/11, 2009 at 17:34

Firefox and Firebug are the best way to see it, btw. You can actually watch the HTML change as you mouse over. – Tortricid 17/11, 2009 at 17:35

Set the blue image as the background of the div. Add the red image in the div as a normal image so that it covers the background image. You can place it in a span. On hover, you then change the opacity of the red image so that the blue image shows through. This is easy to animate in jQuery. On mouseout, do the oposite.

Belongings answered 17/11, 2009 at 17:23 Comment(0)

Right click on the page and hit "View Source". Your answer is in the the JavaScript block in the first 40 lines of the file. (Your jQuery assumption is correct)

Pameliapamelina answered 17/11, 2009 at 17:22 Comment(0)

it has two logo images. one blue one red. red is shown by default. logo image has a sibling span and its background image is the blue logo. span has an opacity of 0. when mouse over the span's opacity is gradually change to 1

Claptrap answered 17/11, 2009 at 17:22 Comment(0)

Probably two images that are "faded" with css opacity. When one is maximum opacity the other has minimum. The transition is made my increasing one opacity and lowering another

Berthold answered 17/11, 2009 at 17:24 Comment(0)

Nosredna is correct but if you want something simpler that you can use yourself without getting attacked for plagiarism;

First you will need a 24-bit PNG or a gif image with a transparent part - the example has transparent liquid.

make sure you include jquery, jquery-ui (becasue it adds CSS background color animation) and your image hover effect

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(function(){

        $("#logo")
            .css({"backgroundColor: "#fff"})
            .hover(function() {
               $(this).stop().animate({backgroundColor: "#f00"}, 'slow');
            }, function() {
               $(this).stop().animate({backgroundColor: "#fff"}, 'slow');
            });

    });
</script>

then in the body drop in your image with the correct ID

<img src="mylogo.png" id="logo" width="100" height="100" />

Keto answered 17/11, 2009 at 17:53 Comment(1)

Never tested it with a PNG applied as a Filter in IE6 - my guess is no? but if you use a GIF, my test did. – Keto 17/11, 2009 at 21:37

Recommended topics

Hot tags