I have an interesting and unique challenge, and I know it can be accomplished in Webflow with some lovin’.
I need a 10 section nautilus shell (MUCH more simple than the example below) - when a section is hovered over it fills that section in with a color and offers a description.
In the past I’ve used Dreamweaver to create the code for interactive sections, but it’s super limiting (especially with creating curves), not to mention Dreamweaver isn’t exactly my first choice for a text editor.
Another idea was to create the vector shape and try to fit it all together on the Webflow Canvas but that seems like a difficult task, especially having all the floating pieces fit together at different page break sizes.
Does anyone have an idea of how to make this shape interactive?
I would super appreciate any help in making this in Webflow!
I’d most likely approach this with an SVG breakout of each layer. And set the SVGs as background images of div blocks that are arranged absolutely within a relative positioned parent element (that way it’s scalable and you can avoid any degradation in the image quality/have really light weight files).
It’s really tough to provide additional suggestions though without a bit more information.
What’s the purpose of the piece exactly?
I’m trying to understand a content consumption pattern that would call for this type of design (aside from it just being for fun to add a unique interactive experience to a page). Would love to understand the goals around it and if you’re looking to make it just a desktop or a responsive experience
@waldo I was also thinking of approaching the problem in a similar way, but thought that having all those floating elements would be a headache and hard to position correctly. Could you expand on how I would accurately position the spiral sections next to each other?
I started to just create hot spots that have a title show when hovered over, but I’m having trouble positioning these as well. See the dev link:
I’m glad you asked about the purpose of the website! It’s hard to explain the entire concept, but it revolves around System Change. The client has created over 25 companies worldwide, and was the first person to start business micro loans in India which was very successful. He was going to retire, but has a burning desire to teach the world about his approach to business, according to this model, which is based in community development and a decentralized economic model.
Starting from the center, the sections are as follows:
Alignment
Place
Immersion
Opportunity
Entrepreneurs
Community Business Models
Stand-Alone Unit
Growth
Replication & Imitation
System Change
In a nutshell, he didn’t want a typical marketing website. He wants to encourage the curious, instead of lower bounce rates. It totally goes against my established marketing background, and I think that’s the point. I’m not explaining it very well so please excuse my lack of brevity.
This page is going to act as the initial landing page for the concept as the case studies are built out. For the mobile experience I was thinking of just having the colored graphic above a list of the color coordinated section titles.
