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>
-
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! //Crescent Fresh : "An image over another image". Not quite, a span is not an image ;)Nosredna : It's an image, just not an img. :-)Dave Swersky : Firefox and Firebug are the best way to see it, btw. You can actually watch the HTML change as you mouse over.chelmertz : That copyright notice is pretty funny.Nosredna : It's not even a proper copyright notice. -
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)
-
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
-
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.
-
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
-
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" />Nosredna : Does that work in IE6?Matt Smith : 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.
0 comments:
Post a Comment