Page 1 of 1
control scrolling with position on the page
Posted: Fri Mar 02, 2018 2:19 pm
by PhotoSpherix
Has anyone controlled the rotation of a 360 in Object2vr with an external javascript, and then changed the rotation based on scrolling of the page.
IE As the page scrolls down, scroll left on the 360, as the page scrolls up, scroll right?
Re: control scrolling with position on the page
Posted: Tue Mar 06, 2018 5:43 pm
by PhotoSpherix
I did not get an answer so I went to work. You will need jquery on the page, then add the following code below the container that show the 360 view. I have built it only for the html5 display. It is not perfect, but it seems to be close. If I was changing it, I would find a better way to get the number of frames and divide 100 by the number of frames better. The st/2.5 gets me to 40 frames in the 360.
Code: Select all
<script>
$(window).scroll(function() {
var lastScrollTop = 0;
var st = 0;
var top_of_element = $("#container").offset().top;
var bottom_of_element = $("#container").offset().top + $("#container").outerHeight();
var bottom_of_screen = $(window).scrollTop() + window.innerHeight;
var top_of_screen = $(window).scrollTop();
if((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
// The element is visible, do something
var st = Math.round((100 * ($(this).scrollTop() / top_of_element) - 50)/1);
if (st > lastScrollTop){
// downscroll code
obj.moveTo(st/2.5,0,0,3);
} else {
// upscroll code
obj.moveTo(st/2.5,0,0,3);
}
lastScrollTop = st;
}
});
</script>
Re: control scrolling with position on the page
Posted: Fri Mar 09, 2018 5:20 pm
by Hopki
Hi Matt,
Sorry I did not get to this but good work.
Regards,
Hopki