Div's placed in a rotating clickable circle?

Design help General
1

Is something like this even possible? I’ve been researching how to do this, especially in Webflow, am not sure if this idea is do-able.

I have 8 images that are each a word with an image placed inside of the word. I’d like to achieve placing these images in the shape of a circle that rotates with the ability to scale and then click on each word.

I am an intermediate web designer, but really stumped on this idea. Can anyone point me in the right direction or provide some advice?

Thank you so much in advance!

Alayna

text as image

2

Hello @Alayna_Pintar, so there are multiple ways to achieve this type of layout, I think the easiest way to achieve in Webflow is by using grid, so place a grid that works with your design, idk maybe 12X12 and place your divs accordingly, that way you can rotate the grid itself and each individual div. I hope this helps.

3

Thank you so much for your reply! @Pablo_Cortes I will try this right now! How do I rotate the grid??

4

hi @Alayna_Pintar there are some challenges to make it work and make it also responsive. Here is a simple example to get an idea how it can be done. I used very simple calculation but feel free take this example to another level and use more complex algorithm to calculate dimensions as you deal with a circle.

You can also create the script that stops rotating on hover etc. etc. It is different approach as @Pablo_Cortes suggested. At least you have more options how to create such layout.

good luck :wink:

2 Likes
5

That is cool @Stan, I thought about something like that too, but I think for Webflow it would be easier just by using Grid. You can rotate the Grid on the interactions panel @Alayna_Pintar, also, another way to achieve what you want is by using circletype https://circletype.labwire.ca/. Good luck!

1 Like
6

Hi @Pablo_Cortes I was trying to understand what you meant by using grid but my mindset is not able to grab this idea. Yeah I have circletype in my libraries bookmarks. :slight_smile:

1 Like
7

Thank you so much @Pablo_Cortes @Stan ya’ll have been extremely helpful! I’m going to work on this today and see what I can come up with :slight_smile:

2 Likes
8

Hey @Stan I’d like to thank you immensely for the example you created! I’ve done my best to recreate it but now I’m stumped on how to space the image containers evenly from 0 to 360 degrees. Again, I’m new to Webflow, but are you able to go in and provide any insight on how to fix this? Also I used px throughout instead of the :root with --v-1 & --img-d as it was a little to confusing for me.

*And thank you @Pablo_Cortes for your grid suggestion, I just couldn’t figure it out, but thank you again :slight_smile:

Here is what I have so far:

9

hi @Alayna_Pintar spacing is done via JS code that automatically space images based on their amount.

1 Like
10

@Stan ahhh so then just add that code to the home page css?

11

Yes @Alayna_Pintar you can add it into page settings before <body> this is the bottom one. Keep in mind that JS doesn’t work in preview mode. You need to publish changes and check result on live “published” page.

<script>
const wrappers = [...document.querySelectorAll(".img__w")];

const calDeg = 360 / wrappers.length; 
// 360deg / amount of images = init degree
// eg. 360 / 6 = 60

wrappers.forEach((wrp, idx) => {
	wrp.style.transform = `translate(-50%, 0%) rotate(${calDeg * idx}deg)`;
    // calDeg * idx  = init degree * image index 
// 60 * 0 = 0 
// 60 * 1 = 60
// 60 * 2 = 120 
// ....
});
</script>

If you have further questions I’m ready to help. :wink:

12

@Stan THANK YOU! THANK YOU! THANK YOU!!! It worked!! :smile: I’m going to start importing the images and adjust a few things, but you’ve greatly helped me with the most complex part of my site! Thank you for being so willing to help! I appreciate you so much!

1 Like
13

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.