Change Pulse Wave Color and Speed for the Main Hotspot

Change Pulse Wave Color and Speed for the Main Hotspot

In TourMkr most used hotspot is the pulse hotspot and there have been requests that wanted changes to the pulse function of the hotspot.
1) Change the color of the pulse
2) Change the pulse speed

  • For changing the color we have the below CSS format
background: radial-gradient(ellipse at center,#fff0 0,red 40%,#fff9 100%);

Where the middle value will control the color of the pulse. In the above code, we've used red, but you can replace that with any hex color code or color name that is valid in html. For piking up a color you can use this page: https://www.w3schools.com/colors/colors_picker.asp

  • For changing the how fast the wave will start pulsing, you can change this value:
animation-delay: 1s;

Note: The default TourMkr value is 3s and

  • For changing the animation frequency you should use this css code:
animation: scale-pulse 1s infinite;

Note: The default TourMkr value is 3s and

Below you can find the full CSS that will combine all the above settings. As a NOTE you need to apply the below CSS to one hotspot per panorama, and all hotspots in that panorama will inherit these settings.

#overlay sh-marker-1 div div.pulse {
  background: radial-gradient(ellipse at center,#fff0 0,red 40%,#fff9 100%);
  animation-delay: 1s;
  animation: scale-pulse 1s infinite;
}

Preview: