How to move the ripple effect?

HTML & CSS
1

Hey, I have a click speed test game https://clickingspeedtester.com/ The main purpose of the game is to measure the clicking speed. On every click, there is a ripple effect produce. But the ripple effect is static. I want to move it to the whole area. Does anyone know how I can do this?

2

Try using @keyframes : https://medium.com/@jh3y/how-to-create-the-ripple-effect-from-google-material-design-c6f993e1d39

Here are some examples also. Hope what you are looking for is in it :

3

What do you mean by static exactly?

When you click there is a circle animated from smaller to larger in the centre of the page. It isn’t static it starts small and gets larger.

Do you mean you want the circle to cover the whole page?

There doesn’t seem there would be time for that to happen before the next click. Or did you mean something else?

The circle effect is dynamically added via JS.

    let rippleElement = document.createElement('span');
		rippleElement.classList.add("circle");
    rippleElement.style.left = "50%";
    rippleElement.style.top = "70%";
    this.appendChild(rippleElement);
    setTimeout(function () {
        rippleElement.remove();
    }, 500);

I couldn’t find the css for it though unless that’s also generated with js.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.