Sie sind nicht angemeldet.

Animated CSS buttons as overlay hotspot

aschakel

Anfänger

  • »aschakel« ist der Autor dieses Themas

Beiträge: 22

Beruf: Designer and coder

  • Nachricht senden

1

Donnerstag, 15. April 2021, 10:36

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

jeromebg

Profi

Beiträge: 1 120

Wohnort: Angers - France

Beruf: 360 experiences creator

  • Nachricht senden

2

Donnerstag, 15. April 2021, 12:57

All this can be done with Krpano, no need of CSS ;)
Just use nested hotspots/layers and tweening.

alexp

Anfänger

Beiträge: 18

  • Nachricht senden

3

Donnerstag, 15. April 2021, 14:26

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.

aschakel

Anfänger

  • »aschakel« ist der Autor dieses Themas

Beiträge: 22

Beruf: Designer and coder

  • Nachricht senden

4

Donnerstag, 15. April 2021, 16:14

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:

Quellcode

 
1
2
3
4
5
6
7
8
9
10

<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:

  • https://krpano.com/forum/wbb/index.php?page=Thread&threadID=9949
  • https://krpano.com/forum/wbb/index.php?page=Thread&postID=76564#post76564

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?

alexp

Anfänger

Beiträge: 18

  • Nachricht senden

5

Donnerstag, 15. April 2021, 16:30

Zitat von »aschakel«

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")

jeromebg

Profi

Beiträge: 1 120

Wohnort: Angers - France

Beruf: 360 experiences creator

  • Nachricht senden

6

Donnerstag, 15. April 2021, 16:51

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

Quellcode

 
1
2
3
4

<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.

aschakel

Anfänger

  • »aschakel« ist der Autor dieses Themas

Beiträge: 22

Beruf: Designer and coder

  • Nachricht senden

7

Donnerstag, 15. April 2021, 17:17

Oh, nice! I'm going to play with that...
Thanks a million.

Ähnliche Themen