Awaiting an answer SP Page Builder

ripple effect

Asked by Robert 5 years ago Last activity 5 years ago

is it possible to add the ripple effect (like on the modal on how it works page from innovate template) to an icon?

6 replies

Ofi Khan Staff

5 years ago

Hello Robert

This is the CSS used for ripple effect. You can use the .sppb-ripple-effect class in the addon settings or use the below CSS wherever you want.

.sppb-ripple-effect {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    box-shadow: 0 0 0 15px rgb(255 255 255 / 80%), 0 0 0 30px rgb(255 255 255 / 60%), 0 0 0 45px rgb(255 255 255 / 40%);
    z-index: -1;
    animation: sppbModalRipple 2s infinite;
}

Best regards

Robert Asked this

5 years ago · edited

Great the animation is on the icon now, but there is a big box shadow around it... On the modal in innovate template the animation doesnt affect the icon itself, it starts from out the border which kind off dissappears... What do i have to alter? I just tried to play around with the box shadow, but can't really find out how to set it right... if i remove the box shadow the angle icon (which i have the animation on) will just fade in and out... I tried to just set keyframes in my custom.css and adjust the opacity but it didnt work...

Ofi Khan Staff

5 years ago

You are right. It is beause the source code is different for Modal Popup and Icon addons. If you want it, then you can customize.

Robert Asked this

5 years ago

I tried to customize this and i have the effect good now on firefox... When i open the site on edge the animation is at a much higher position... How can i fix this so it works good on all browsers...?

You can check the link here so you can view it on different browsers...

http://rijschoolharen.vulperia.synology.me

Ofi Khan Staff

5 years ago

Where is the effect? I could not find it.

Robert Asked this

5 years ago

I had to give up on this due to the clients timeline for making the website... I didnt have time to polish up this effect anymore so had to let it go... I have taken it off the website...