How to  set 360 rotating image as landing page background?

karthik80c
karthik80c used Ask the Experts™
on
Hi Experts

I wonder how to set 360 degree rotating image as my landing page background as other sites done it. But they did this with flash content . how to do this in purely js and css ?

e.g https://theta360.com

Thanks in Advance Experts
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
greetings  karthik80c, , Not sure I can help with this, I am here because no other expert has commented yet. . .
I looked that the demo pages on the   https://theta360.com    web site, and it does use a special setup in a plugin (flash content) to get the right and left sides of the scrolling image views to change (get a closer Zoom in) from the view (height) in the center of the viewport.
I have not seen any javascript and CSS image scroller that does this. . . You can change the "view" in an entire view box with js and CSS, but not a gradual change from positions in the view box, as is seen in their demos. If you really need or want their effect, why don't you use their page addon of the theta 360 that they offer.

Which part of their scrolling effect do you need to have? all of it?
Top Expert 2015
Commented:
I tried to make a quick demo on jsfiddle but there are some problems. It doesn't work in Firefox on my machine for some reason and it jumps at the end. Out of time for today.

Anyway, the idea is to start with a 180 degree panoramic image as a background to a div then with jQuery, animate the background position so it scrolls by an loop it when it gets to the end.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial