Have elements follow the mouse in RaphaelJS canvas using jQuery

http://terryyoung.blogspot.com/2011/08/elements-following-mouse-in-raphaeljs.html

by stackmanoz

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>







<div id="RJS_CANVAS_MOUSEMOVE_1"></div>

JavaScript

$(document).ready(function () {
    var paper       = Raphael('RJS_CANVAS_MOUSEMOVE_1', 640, 360),
        set         = paper.set(),
        circles     = 23,
        smallest    = 5,
        gap         = 2,
        strokeWidth = 2,
        margin      = 10,
        duration    = 30,
        delay       = 20,
        timer       = null,
        follow      = true;

    // cache these
    var $canvas     = $(paper.canvas);
    var offset      = $canvas.offset();

    // create circles
    for (var    i = 0, j = circles, k = 1, m = smallest;
                i < j;
                i++, k = k - 0.9 / j, m = m + gap)
    {
        set.push
        (
            paper.circle(-500, -500, m)
                .attr({
                    'stroke-width':     strokeWidth,
                    stroke:             '#492f2c',
                    fill:               'none',
                    'fill-opacity':     0,
                    opacity:            k
                })
        );
    }

    // prepare mousemove handler
    var onMouseMove = function (event) {
        var x = event.pageX - offset.left,
            y = event.pageY - offset.top;
        var pos = {x: x, y: y, cx: x, cy: y}; // lazy routine: for both rects and circles

        for (var i=0, j=set.items.length, k=duration; i<j; i++, k=k+delay)
        {
            set.items[i].stop().animate(pos, k, 'backOut');
        }
    };

    

   
    // default is to follow the mouse
    $canvas.bind('mousemove', onMouseMove);
});