Fade effect
Recently I have seen a nice effect that makes HTML elements to fade from one color to another.
You can see what I mean here, just click the next link:
CLICK HERE TO SEE WHAT I MEAN!
The solution:
1) Searching on Internet I found that there is a technique called Yellow Fade technique that makes this effect.
2) But there is another improved technique called Fade Anything Technique that is better. It lets you fade from any color, decide how many frames per second you want and choose the duration of the effect.
2.1) Simple use of Fade Anything Technique:
Download the fat.js script and include it in your website:
<script type="text/javascript" src=" fat.js"></script>Choose an element like a DIV and give it the class “fade“:
<div id="mydiv" class="fade">Fade it!</div>The DIV element will fade from the default yellow color #FFFF33 to its original background color.
2.2) Advanced use of Fade Anything Technique:
- Change the default fade from color:
<div id="mydiv" class="fade-0066FF">Blue fade</div>- Fade an element using the function Fat.fade_element() :
The Fat.fade_element() function accepts some arguments: target ID, frames per second, fade duration, fade color, final color.
Example: fade DIV from red to green at 60 frames per second for 5 seconds:
<a href="javascript:Fat.fade_element('mydiv', 60, 5000, '#FF0000', '#00CC00')">CLICK HERE</a>
CLICK HERE TO FADE FROM RED TO GREEN!
As you see is easy to make your own fade effects with this nice script!
Links:
- For more detailed information visit the Fade Anything Technique website
- For the original fade technique visit Yellow Fade Technique website
- And I have also found an improved Fade Anything Technique that says to work well in Safari, but I could not test it.
7 Comments so far
I have a problem …I can not stop the fade if mouseOut and mouseOver fade is runing over the mouseOut fade
Good Job…
I don’t know exactly what you mean.
Can you give an example?
onMouseOver=”this.style.cursor=’pointer’;Fat.fade_element(’btn1′, 100, 300, ‘#FFFFFF’, ‘#555555′);”
onMouseOut=”Fat.fade_element(’btn1′, 100, 300, ‘#555555′, ‘#000000′);”
I have seen that if you click you must wait until the fade effect finish before doing mouseover or mouseout.
:/
that I was try’n to explain here…:) …with a condition in the loop can be stopped somehow? because if the mouseout instance starts before mouseover loop has finish, it will show both combined….
I was trying to stop the effect, but I couldn’t.
Hopefully you will get an answer in the original script site: http://www.axentric.com/posts/default/7
The bad thing is he hasn’t any email or comments on the site.
Sorry
thans! I apreciate your cooperation…good luck