Effect similar to new desktop Chrome clicks - CSS-Tricks

This topic is empty.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
September 30, 2016 at 11:38 pm #246065

damian5000
Participant

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!

October 1, 2016 at 1:39 am #246067

Beverleyh
Participant

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.

October 1, 2016 at 2:33 am #246070

damian5000
Participant

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.

October 1, 2016 at 3:05 am #246071

Beverleyh
Participant

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.

October 1, 2016 at 3:21 am #246072

damian5000
Participant

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.

October 1, 2016 at 1:56 pm #246083

Shikkediel
Participant

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

ClickBubble

October 1, 2016 at 2:24 pm #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);
```
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

The forum ‘JavaScript’ is closed to new topics and replies.