I was playing around, seeing what I could all do with this software. A little bit of javascript, a little bit of CSS and you can make some cool transitions. Here is an example of what I came up with. Each node has a different transition. This is meant to show the transitions, not the property. It is for use here only.
https://hvolnew.com/Pano/transitions/output/index.html
CSS & Javascript Transitions
Last edited by Neal on Wed Aug 12, 2020 11:13 pm, edited 1 time in total.
- 360Texas
- Moderator
- Posts: 3684
- Joined: Sat Sep 09, 2006 6:06 pm
- Location: Fort Worth, Texas USA
- Contact:
Yes, transitions are a great option. But remember please.... while presentation is essential but FIRST and FOREMOST show the product. It is not so much how you present ... as it is seeing what the client is buying. The buyer is spending their money to purchase the property... not the presentation.
Just being honest.... Hope this helps
Just being honest.... Hope this helps
While I agree that showing the product is the most important, I don't understand what that comment has to do with this thread. That presentation was nothing more than a means of showing the transitions here, it wasn't meant for a sales presentation.360Texas wrote: ↑Wed Aug 12, 2020 10:59 pm Yes, transitions are a great option. But remember please.... while presentation is essential but FIRST and FOREMOST show the product. It is not so much how you present ... as it is seeing what the client is buying. The buyer is spending their money to purchase the property... not the presentation.
Just being honest.... Hope this helps
I thought others might find them interesting.
- Hopki
- Gnome
- Posts: 13005
- Joined: Thu Jan 10, 2008 3:16 pm
- Location: Layer de la Haye, Essex UK
- Contact:
Hi Neal,
I am a child of the sixties and find this very funky
Not that I remember much about the sixties.
Can you share your workflow?
Regards,
I am a child of the sixties and find this very funky
Not that I remember much about the sixties.
Can you share your workflow?
Regards,
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
It involves a little bit of intermediate CSS and Javascript. It is a combination of CSS filters and transition settings, with javascript triggers. On the body element set the filter options to their default values. Use CSS transition to set the timing for half of the pano transition. To the node click event, add javascript to change one or more of the filter options. If you want a blur effect with a fade to black, set the brightness to 0 and the blur to 50px. The transition that was set in the CSS will determine the time it takes for those effects to complete. Using a timeout function, trigger a node change, and have the javascript return the filter values back to default.
The sequence is:
1) Node icon click
2) Transition fade in
3) node change
4) transition fade out
Since I was using this to show some of the various transitions that were possible, I added some additional code to tie the effect to the specific nodes. You normally wouldn't want to mix transitions in a presentation. So that code is unnecessary.
for those interested:
The CSS
Code: Select all
body {
height:100%;
margin: 0px;
overflow:hidden; /* disable scrollbars */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* remove highlight on tab for iOS/Android */
filter:
blur(0px)
brightness(1)
contrast(1)
grayscale(0)
hue-rotate(0deg)
invert(0)
opacity(1)
saturate(1)
sepia(0);
transition: filter 3s ;
}
Code: Select all
At the beginning of the skin.js
let body = document.getElementById('body');
body.style.filter = "brightness(1) blur(0px) contrast(1) grayscale(0) hue-rotate(0deg) invert(0) opacity(1) saturate(1) sepia(0)";
me._ht_node.onclick=function (e) {
let body=document.getElementById('body');
let nextNode=me.hotspot.url;
body.style.filter = "brightness(4) blur(0px) contrast(1) grayscale(0) hue-rotate(0deg) invert(0) opacity(1) saturate(1) sepia(0)";
setTimeout(function(){
pano.openNext(nextNode);
body.style.filter = "brightness(1) blur(0px) contrast(1) grayscale(0) hue-rotate(0deg) invert(0) opacity(1) saturate(1) sepia(0)";
},1000)
I checked it in Firefox, it does work. Everything I used is compatible with the current browsers. Really the only issue would be IE9 and the mini version of Opera (Opera Mini).
Hmm. It's working on the laptop, manjaro/ff. Must be something up with the windows rig. Might warrant some testing before you deploy to a wide market but that is up to you
J
Not sure what I'm supposed to be seeing, but I'm not getting any actual panoramas, just the hotspots and thumbnails. Although clicking on each of those does do something different each time and I can see colour effects blurs etc. applied to the thumbnails.Neal wrote: ↑Wed Aug 12, 2020 10:23 pm I was playing around, seeing what I could all do with this software. A little bit of javascript, a little bit of CSS and you can make some cool transitions. Here is an example of what I came up with. Each node has a different transition. This is meant to show the transitions, not the property. It is for use here only.
https://hvolnew.com/Pano/transitions/output/index.html
I'd be very interested on how you're doing them, as anything would be an improvement on the standard transitions, especially as they're broken if you set FoV Mode:Diagonal.
I'd actually be happy with a simple short Zoom in, fading into another short Zoom in to the next pano. Sort of a poor man's Matterport. But although you can select that in Pano2vr, it doesn't work. If you haven't seen my video about this, it's here: https://youtu.be/d20hJKu_q2w
@Josh, @Branigan, What version of FireFox are you running? Firefox reports this working on all recent versions and I can't reproduce it.
- 360Texas
- Moderator
- Posts: 3684
- Joined: Sat Sep 09, 2006 6:06 pm
- Location: Fort Worth, Texas USA
- Contact:
Pano2VR content needs OpenGL. Check to see if your FireFox version is 80-81.
80 - 81 contains OpenGL
https://caniuse.com/#search=openGL
80 - 81 contains OpenGL
https://caniuse.com/#search=openGL
- Hopki
- Gnome
- Posts: 13005
- Joined: Thu Jan 10, 2008 3:16 pm
- Location: Layer de la Haye, Essex UK
- Contact:
Hi Neal,
I just tested your link in Firefox (79.0 (64-bit), Mac 10.15.6.
It opens really slow and it is unresponsive.
If I go to pan the image nothing happens for a few seconds then it starts to rotate in steps.
Works fine in Chrome and Safari.
If I make the browser window much smaller it start to be more responsive.
Regards,
I just tested your link in Firefox (79.0 (64-bit), Mac 10.15.6.
It opens really slow and it is unresponsive.
If I go to pan the image nothing happens for a few seconds then it starts to rotate in steps.
Works fine in Chrome and Safari.
If I make the browser window much smaller it start to be more responsive.
Regards,
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
Thanks for the help guys. I did some research. According to Chrome, Edge and Firefox they all handle the filter CSS properly correctly and properly. Of course, as is typical, they define correct differently. It appears that Firefox, under specific conditions modifies the position of the child elements for the container with the filter applied. This resulted in the player going elsewhere.
I have modified where the filter is applied, so I hope it will resolve the issue. I have checked it on my side, but it appears to have a hardware aspect.
@Hopkin - tell me how this works - https://hvolnew.com/Pano/2447-Hwy-N/pano.html
I have modified where the filter is applied, so I hope it will resolve the issue. I have checked it on my side, but it appears to have a hardware aspect.
@Hopkin - tell me how this works - https://hvolnew.com/Pano/2447-Hwy-N/pano.html
- Hopki
- Gnome
- Posts: 13005
- Joined: Thu Jan 10, 2008 3:16 pm
- Location: Layer de la Haye, Essex UK
- Contact:
Hi Neal,
There are no transitions effects but the pano moves as it should.
Regards,
There are no transitions effects but the pano moves as it should.
Regards,
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
Thanks.
Try the initial link again. I made a change to how the filter is applied. I don't think if will help, however.
The Javascript code is short and tied to an onClick event. It shouldn't affect panning or anything else. Is sounds like something to do with how Firefox on Mac handles the filter CSS effect. I'll see if there is a workaround.