Javascript: Floating G logo and shadow jQuery effect.

So I bet the only reason why you are currently reading this “Journal” aka blog, is for this article below. I bet you may have been waiting your whole life for this howto on javascipt to come along. Am I right? Right?

No?

Alrighty, well anyway I would still like to share the code behind the floating G up in the header that you see above. I spent many many hours perfecting this. Actually one hour, but still.

So lets get started with this beast!

You’ll need the jQuery from here: http://code.jquery.com/jquery-1.4.4.js into your header of your website. Once you’ve got that you should create a javascript file with the following .js code.

1. $("#solidgiant_logo li").hover(function() {
2. var e = this;
3. $(e).find("a").stop().animate({ marginTop: "-20px" }, 100, function() {
4. $(e).find("a").animate({ marginTop: "-14px" }, 150);
5. });
6. $(e).find("img.shadow").stop().animate({ width: "80%", height: "60px", marginLeft: "30px", opacity: 0.50 }, 150);
7. },function(){
8. var e = this;
9. $(e).find("a").stop().animate({ marginTop: "4px" }, 250, function() {
10. $(e).find("a").animate({ marginTop: "0px" }, 250);
11. });
12. $(e).find("img.shadow").stop().animate({ width: "100%", height: "60px", marginLeft: "0", opacity: 1 }, 250);
13. });

Now that you have the code you’ll need the css to make this look legit. Well as legit as you are able. Beauty is in the eye of the beholder right?

Here is the CSS styles for ya.

1. #solidgiant_logo li {
2. width: 261px;
3. height: 301px;
4. position: relative;
5. float: left;
6. }
7. #solidgiant_logo a, #solidgiant_logo a:visited, #solidgiant_logo a, #solidgiant_logo a:hover {
8. margin: 0 auto;
9. width: 261px;
10. height: 301px;
11. text-indent: -9999px;
12. overflow: hidden;
13. background: url(../images/g_logo.png) no-repeat;
14. display: block;
15. position: relative;
16. z-index: 2;
17. }
18. #solidgiant_logo li img.shadow {
19. margin: 0 auto;
20. position: absolute;
21. bottom: 0;
22. left: 0;
23. z-index: 1;
24. }

You’ll of course need to add these styles into your own css document, but if you are here than you probably already knew that.

If you want the files for this download the javascript file here.

If you like this article, than be sure to comment here, or even share this beast wherever. Twitter would be nice if you wanted to share. xoxoxo