Another semi-useful JavaScript snippet. This will make it seem like the bottom of the page is fading-out as the user scrolls (ooo, WOW!). It creates a number (specified as a parameter) of divs, each with varying opacity and each anchored to the bottom of the viewport. (Unfortunately, because we’re using “position:fixed;” this won’t work in IE6).

For a demonstration, click HERE! < this is a bookmarklet, so you could also drag it to your bookmarks toolbar and use it on any website… 😉

The Code:

function btmPageFade(height,color) {
 
    var i,o,
        wrap = document.createElement('div'),
        style = function(el,s) {
            for (var i in s) el.style[i] = s[i];
        };
 
    wrap.id = 'optional-id'; // You might want to give it an ID
 
    for (i = 0, o = height; i < height; i++, o--) {
 
        var div = document.createElement('div');
        style(div,{
            width: '100%',
            height: '1px',
            background: color,
            position: 'fixed',
            bottom: i + 'px',
            left: 0,
            opacity: o / height,
            filter: 'alpha(opacity=' + (o / height) * 100 + ')'
        });
        wrap.appendChild(div);
    }
 
    document.body.appendChild(wrap);
 
}

Usage:

btmPageFade(50,'#FFF');

Obviously this isn’t very practical on this website because the footer links become un-clickable but I’m sure there are uses for it elsewhere…

Thanks for reading! Please share your thoughts with me on Twitter. Have a great day!