Hover Fx
Written by: Scott GordonThis is a brief tutorial on how to make the link hover effect as seen on our site. Hover Fx requires mootools 1.11. You can customize your download to contain only the components that Hover Fx uses. However, I usually add all the classes. I mean its only 65kb, I’d like to see you try that with flash! Hahaha. But if you do want to save space you only need the following components.
Class Class.js + Class.Extras.js
Native Array.js + String.js + Function.js + Number.js + Element.js
Element Element.Filters.js + Element.Selectors.js
Window Window.DomReady.js
After you’ve downloaded mootools you need to download Hover Fx > download hoverfx.js here
Ok, now that you have the scripts we can begin! First, open hoverfx.js in the text editor of your choice and find then line that says:
‘color’: ‘#0f0′ //Edit this to change the hover color
You can change the hex code to any color you like. Can it be anymore obvious? I didn’t think so. 6 lines down find the line that says
‘color’: ‘#000′ //Edit this to change the normal color
This controls the normal link color. OMG! Now to set up your html and css files. To add Hover Fx to your page you only need to add the following to the <head> section of the html document.
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="hoverfx.js"></script>
Make sure you upload the files to the same directory as your file. If you want to put them somewhere else make sure you change the code accordingly.
When setting up your css make sure you DONT SET THE A:HOVER STYLE. If you do, the browser tries to do both effects at the same time and you wont see the hover in effect. The link styling should look like this to work with the original colors in hoverfx.js
a, a:link, a:visited, a:active {color:#000;
}
Tags: mootools, web design
May 7th, 2008 at 11:24 pm
What a beautiful idea. I’ll try and implement it this weekend (but I need to find something better than DWB first).
Btw - I’m interested in writing a feature on DWB so I tried to email you but it bounced back.