Streaming live at 10am (PST)

Designing over 360º Panoramics in Webflow


#1

Hi! I want to design websites similar to this one: http://www.sferica.com.br/cases/braspress/index.html (click anywhere in the image to start)
As you can see, its a 360º panoramic image in the background with some menus over it.
Is there anyway that i can embed a interactive 360 panoramic in the background and build things over it?
Thats what i got so far, but i think it gets all messed up because i cant build sections over the section with the panorama to maintain de design.

Theres anything that i can do?

https://webflow.com/design/studio-raw?preview=8b07392988d1da4eb0bafd463d9539c8

Thanks in advance! And sorry for my english, maybe its bad, its not my main language.


#2

Gabriel your english is just fine! We all speak the internazionnale english here, I'm not a native speaker either.

What I see on your site, the Small Planet that you can navigate, is awesome!

Precisions on sections : a section is just a webflow element, so you don't need to nest them (put one inside another) and my advice is you don't have to care that much about what is a section, what is a container, what is a div (apart that containers are very practical because they structure your main content).
In the end, they're all DIVs (DIVisions of page)

Simply build your over-the-top menu in a div with a unique class. So place a div, give it the position you need (absolute, relative, fixed...) (I recommend you give is an Absolute position, and don't forget to give a Position:relative attribute to its parent, the 360 section, so the relative coordinate are relative to it) and then design in it. So you don't have to give any weird positoning attributes to the elements inside (your logo, buttons etc.)

Quick reminder of the best CSS rule : An absolute positioned element is positioned regarding its closest placed parent. That's why you give position:relative to the 360 section. It does not affect it at all, it's just for placing your DIV for the menu.

Hope this helps! Don't forget to come back with the final result, it's so cool smile


#3

This is amazing! Can I ask what you used to create the 360 to begin with?


#4