Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.
Seriously guys this is best script i have ever seen in my life and for it's not a jquery script. It's a MooTools script and this tutorial was so big and complicated so i compiled four different scripts into one to make it look easy and small. All we need is MooTools, CSS3 and an image. I found this tutorial at David Walsh. Let's get started:
First we have to add basic html in your document:
<a href="/" id="homeLogo">David Walsh Blog</a>
Now after this we'll add CSS3 which will contain our image. The original element should be styled to size (width and height) with the background image that we'll use as the exploding image:
a#homeLogo {
width:300px;
height:233px;
text-indent:-3000px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicT4uc_ZVJiEJz50hcmmrzMVqVSG4uh7WTUb3mRmKnEa_YEBgjG-nNGPfL4-ZC7eGpJAU1GNoTtGQRwGyVOEWqZggOvtqY0NmKusvtZrHcEazio3iDAFl8uwjKsnuoLSF2YvrtQesZEvw/s1600/Logo.png) 0 0 no-repeat;
display:block;
z-index:2;
}
a#homeLogo span {
float:left;
display:block;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicT4uc_ZVJiEJz50hcmmrzMVqVSG4uh7WTUb3mRmKnEa_YEBgjG-nNGPfL4-ZC7eGpJAU1GNoTtGQRwGyVOEWqZggOvtqY0NmKusvtZrHcEazio3iDAFl8uwjKsnuoLSF2YvrtQesZEvw/s1600/Logo.png);
background-repeat:no-repeat;
}
.clear { clear:both; }
Now finally we'll add our magic script:
<script src="http://widcraft.googlecode.com/svn/ExplodingMooTools.js"></script>
Our full document will look something like this:
<a href="/" id="homeLogo">David Walsh Blog</a>
<style>
a#homeLogo {
width:300px;
height:233px;
text-indent:-3000px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicT4uc_ZVJiEJz50hcmmrzMVqVSG4uh7WTUb3mRmKnEa_YEBgjG-nNGPfL4-ZC7eGpJAU1GNoTtGQRwGyVOEWqZggOvtqY0NmKusvtZrHcEazio3iDAFl8uwjKsnuoLSF2YvrtQesZEvw/s1600/Logo.png) 0 0 no-repeat;
display:block;
z-index:2;
}
a#homeLogo span {
float:left;
display:block;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicT4uc_ZVJiEJz50hcmmrzMVqVSG4uh7WTUb3mRmKnEa_YEBgjG-nNGPfL4-ZC7eGpJAU1GNoTtGQRwGyVOEWqZggOvtqY0NmKusvtZrHcEazio3iDAFl8uwjKsnuoLSF2YvrtQesZEvw/s1600/Logo.png);
background-repeat:no-repeat;
}
.clear { clear:both; }
</style>
<script src="http://widcraft.googlecode.com/svn/ExplodingMooTools.js"></script>
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
