Pulsing Hotspot Effect

I'd like a pulsing hotspot animation effect. i.e. grow 20%, revert to original, loop continuously.

The image would be either a circle, square or rectangle, outlined or filled with slight transparency.

Discussion (3)

Could you use an animated GIF as your hotspot image? Not that ELB couldn't add this effect, but as a stopgap. I haven't tried, can CVR handle transparent/semitransparent images?

CVR doesn't import animated gif file types. I suppose I could add it as a transparent video but videos don't always work across all devices. I just want to mimic what Articulate Storyline has for its hotspots.

Hello, do it with CSS. First, in Lectora, add an HTML extension to the page, type Cascading-Style-Sheet (I'm working with the German-language Lectora version; I'm not sure how this is displayed in the original language - at least CSS has to come out: -)).


Then feed the HTML extension with the following CSS code:


@keyframes Puls_1_Normal_Regular {

0% {

transform: scale(1);

}

50% {

transform: scale(1.1);

}

100% {

transform: scale(1);

}

}

.Puls_Regular {

  animation: Puls_1_Normal_Regular 2s linear 0s 1 normal none;

}

.Unendlich {

  animation: Puls_1_Normal_Regular 2s linear 0s infinite normal none;

}


In the next step, the Lectora element (text, image, etc.) must receive the CSS class Unendlich. (The German word Unendlich stands for infinite :-)). I have a screenshot attached.

greetings

ekmud