Some tricks

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