Cursor Trails

cursor trails example

HTML

<script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
<div id='container'>
    While the mouse is within this area, it will have a custom cursor trail
</div>

CSS

#container {
    background-color: #000066;
    color: white;
    font-weight: bold;
    height: 300px;
    width: 100%;
    overflow: hidden;
    padding: 5px;
}

.cursor-trail {
    position: absolute;
    z-index: 10000;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    background-color: black;
    pointer-events: none;
}

.yellow-trail {
    background-color: #ff0066;
}

JavaScript

(function($) {

    var baseCssClass = "cursor-trail",
        addPoint = function(pageX, pageY, cssClass, timeToGrow, timeToShrink, opacity) {
            // Create a new point located at the mouse position
            var point = $("<div>", {
                "class": cssClass,
                css: {
                    left: pageX,
                    top: pageY
                }
            }).appendTo('body');

            // now make the point grow, then shrink and finally disappear
            point
                .transition({ opacity: opacity }, timeToGrow)
                .transition({ opacity: 1 }, timeToShrink, function() { point.remove(); });
        };

    $.fn.cursorTrail = function(options) {
        // assign defaults for those options not supplied
        options = $.extend({
            timeToGrow: 500,
            timeToShrink: 500,
            opacity: 10,
            "class": ""
        }, options);

        // add the base css class all cursor trail points need.
        var actualCssClass = baseCssClass;
        if (options["class"]) {
            actualCssClass += " " + options["class"];
        }

        return this.bind("mousemove", function(ev) {
            addPoint(ev.pageX, ev.pageY, actualCssClass, options.timeToGrow, options.timeToShrink, options.opacity);
        });
    };
}(jQuery));

// jQuery.transit has a bug in older IE versions, so switch to jQuery animate
if (!$.support.transition) {
    $.fn.transition = $.fn.animate;
}

$("#container").cursorTrail({
    "class": "yellow-trail"
});