Animated CSS buttons as overlay hotspot

  • Hi there,
    I've come across this amazing tour in KRPano you'll find here: https://www.circularmaterialscenter.be/
    If you open the tour you will find some hotspots like videos. The mouseover over this buttons make
    the CSS overlay hotspot animate.

    I really like the technique but I don't get my head around it. How is this done? I've made a lot of tours
    and all with static buttons that I do load from the XML. But I think they do something different here.


    Does anybody have some heads up for me?
    Thanks in advance!
    Aleks

  • Yes it's absolutely possible with krpano.
    However, in this example, this made with CSS transform and transition.
    It has a div element with an icon with border-radius: 50%; that makes it round and :hover rule that change it to the bigger size and transition property to animate the size changing. The second div element with the title has a small scale by default to be invisible and on hover the icon element title has transform: scale(1, 1); and transition to smoothly appear on the screen.

  • Cool, thanks for the answers!
    But as I read it: jeromebg said it is done by Nested Hotspots and alexp is saying how the CSS it build up.
    I do know how to style with CSS, border-radius and such is known by me. So that part I do understand.
    When I make a hotspot, I put a code in the XML like this:

    Code
    <hotspot 
        		type="image" 
        		url="skin/icon-walk.png" 
        		width="80" 
        		height="80" 
        		scale="1"
        		ath="0.724" 
        		atv="25.353" 
        		onclick="js(specific_360.updateUrl('entree/-129|0|11|100'));"
        	/>


    That works, and make an icon with a PNG image.

    But, how to make a CSS hotspot?

    So I found topics like this:


    I find it hard to understand, how to begin? Maybe it is simpler then I think. Somebody can
    post some code or give me a good direction?

  • But, how to make a CSS hotspot?

    I mean to add styles to a hotspot that is made in KRpano, as in your example.
    Hotspots should have property renderer="css3d" and you can get the sprite hotspot[name].sprite - an element that you can style with CSS, add CSS class to it with Javascript element.classList.add("class-name")

  • If you want to apply CSS to a hotspot you can do it that way :

    Code
    <hotspot class="my_class" onloaded="set_css_class(get(class))" renderer="css3d"/>
    <action name="set_css_class" type="Javascript">
    	caller.sprite.className = args[1];
    </action>

    Note that using renderer="css3d" the hotspot won't be displayed in VR mode.

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!