Pulsing Hotspot Effect
July 4, 2023 12:00 AM
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