Effect similar to new desktop Chrome clicks

[damian5000]

Recently it seems desktop Chrome made an interesting change that when you click on a Chrome button (back / forward / refresh etc…) it makes an Android mobile like effect like a bubble or rippling circle.

Is there any way to get a similar effect when a user clicks links on my webpages in desktop? One site is WP and the other MyBB… So with CSS or javascript etc…?

Thanks!

[Beverleyh]

I think I know the effect, although I’m on mobile so can’t check.

For the visuals, I imagine you could create the “expanding bubble” with an animated pseudo element (started out as a small circle using border-radius) on the links in question. The keyframe animation would most likely transition the pseudo element’s opacity (to create the fade) and also use transform:scale3d (for the increase in size).

The click action… You could use JavaScript to apply a class (the class that triggers the animation) and remove it again after a 1 or 2 second timeout/delay (although this class removal part probably isn’t needed because you’ll have navigated to another page). Alternatively, you might be able to animate the :active state of the links, which would cut out the need for JavaScript entirely.

If you create a reduced demo in CodePen, using the steps from above to build in the key features of what you’re trying to do, we can offer suggestions based on your code.

[damian5000]

All that’s way beyond me. Thought it might have ready been a popular thing and done already, or very simple thing to do.

If you’re not sure what I mean, click any button in the navigation bar in Chrome. Gives a mobile tap like effect.

[Beverleyh]

Yes I know the effect you mean – I’ve seen it on desktop recently. However I’m not at a PC at the moment so I’m recalling the visual from memory.

The effect may already have been done on links by other folks. I’ve used something similar for a momentary play/pause indicator here http://fofwebdesign.co.uk/freebies-for-websites/css/slider-rwd-auto-touch-js.htm. Feel free to extrapolate the CSS from that and play around. Else you will need to Google around to find examples to extrapolate from other websites.

If you are unable to create or implement this yourself, and you really want it on your website, it might be an idea to hire someone. Unfortunately, this is not a request forum where you describe what you want and developers come online to do the work for you. Sometimes that may happen, for example, if a developer has already created a demo that they can link you to, or if they take a personal interest and knock-up the whole thing for you free of charge, but it’s not a given. Without sample/starter code of yours to work with, it’s more likely that you’ll get a talk-through of suggested steps and search terms to research online.

At the end of the day, you either do the work yourself (including research and any trial and error learning process to build X effect/module/component) or consider hiring somebody who already has that knowledge.

Good luck with your project.

[damian5000]

Thanks for the help. My request isn’t for someone to do it for me. My request is to be pointed to code already done. I’d be very surprised if something like this doesn’t already exist. I’ve tried googling, but didn’t turn up anything yet. Will take a look at the link you’ve suggested.

[Shikkediel]

My previous post disappeared, not sure why. Here’s something:

ClickBubble

[Shikkediel]

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);

[Author]

Posts