HoverUI

HTML

<div id="viewport">
    <div id="demo1" class="ui-item"></div>
    <div id="demo2" class="ui-item"></div>
    <div id="demo3" class="ui-item"></div>
</div>

CSS

body{
    padding:20px;
    background:#eee;
}

#viewport{
    width:400px;
    height:250px;
    background:url('http://placehold.it/400x250/dddddd/cccccc');
    margin:0 auto;
    -webkit-box-shadow:0 2px 10px rgba(0, 0, 0, 0.2) inset, 0 1px 0 #fff;
    -moz-box-shadow:0 2px 10px rgba(0, 0, 0, 0.2) inset, 0 1px 0 #fff;
    box-shadow:0 2px 10px rgba(0, 0, 0, 0.2) inset, 0 1px 0 #fff;
    position:relative;
}

.ui-item{
    background:rgba(0,0,0,0.4);
}

#demo1{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:30px;
}
#demo2{
    width:50px;
    height:50px;
    position:absolute;
    top:10px;
    right:10px;
    
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}

#demo3{
    width:100px;
    height:75px;
    position:absolute;
    top:10px;
    left:10px;
    
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}

JavaScript

var HoverUI = {

    defaults: {
        container: '#viewport',
        selector: '.ui-item',
        delay: 5000,
        fadein: 500,
        fadeOut: 500,
        hideCursor: true,
        hideInitially: true
    },
    settings: {},
    animatingIn: false,
    fadeOutModules: false,
    x: 0,
    y: 0,

    init: function(opts) {
        HoverUI.settings = $.extend({}, HoverUI.defaults, opts);
        if(HoverUI.settings.hideInitially){
            $(HoverUI.settings.selector).css('opacity', 0);
        }
        $(document).on('mousemove', HoverUI.settings.container, HoverUI.listener);

        $('<style type="text/css">.no-cursor{cursor:none}</style>').appendTo('head');
    },

    listener: function(e) {

        clearTimeout(HoverUI.fadeOutModules);

        if (HoverUI.x != e.pageX && HoverUI.y != e.pageY) {
            HoverUI.x = e.pageX;
            HoverUI.y = e.pageY;
            if (HoverUI.settings.hideCursor) {
                jQuery(HoverUI.settings.container).removeClass('no-cursor');
            }
            if (!HoverUI.animatingIn) {
                HoverUI.animatingIn = true;
                var curOpacity = jQuery(HoverUI.settings.selector + ':first').css('opacity');
                if (curOpacity != 1) {

                    jQuery(HoverUI.settings.selector).fadeTo(HoverUI.settings.fadeIn, 1, function() {
                        HoverUI.animatingIn = false;
                    });
                }
            }
        }
        HoverUI.fadeOutModules = setTimeout(function() {

            jQuery(HoverUI.settings.selector).fadeTo(HoverUI.settings.fadeIn, 0, function() {
                HoverUI.fadeOutModules = false;
                HoverUI.animatingIn = false;
                if (HoverUI.settings.hideCursor) {
                    jQuery(HoverUI.settings.container).addClass('no-cursor');
                }
            });
        }, HoverUI.settings.delay);

    }
};

HoverUI.init({
    container: '#viewport',
    selector: '.ui-item'
});