Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Effect similar to new desktop Chrome clicks Reply To: Effect similar to new desktop Chrome clicks

#246084
Shikkediel
Participant

The code in question for possible future reference.

! function(i) {
    i.fn.clickBubble = function(e) {
        var t = {
                color: "#000",
                size: 20,
                time: 500,
                borderWidth: 2
            },
            o = 0;
        return e = i.extend(t, e), i(this).on("mousedown", function(n) {
            var r = n.clientX,
                d = i(window).scrollTop() + n.clientY;
            i("<div>").attr("id", "clickBubble_" + o++).css({
                width: 0,
                height: 0,
                border: t.borderWidth + "px solid " + e.color,
                position: "absolute",
                left: r,
                top: d,
                "border-radius": "50%"
            }).animate({
                width: t.size + "px",
                height: t.size + "px",
                left: r - .5 * t.size,
                top: d - .5 * t.size,
                opacity: 0
            }, t.time, function() {
                i(this).remove()
            }).appendTo("body")
        }), this
    }
}(jQuery);