[Tutorial][CSS] Spinning Wheel

monoVertex

I'm back!
Reaction score
460
I have created an interesting and very fluid effect in CSS3 and I wanted to share it, so I put together a tutorial / demo.

You can find it here.
This is the finished demo.

And here is a GIF displaying the functionality:

7.gif


What do you think about it? I'd also appreciate feedback on the tutorial and code themselves :D.
 

Accname

2D-Graphics enthusiast
Reaction score
1,462
Looks nice on one hand, and useless on the other. I dont know what good this would ever be.
 

monoVertex

I'm back!
Reaction score
460
It can be used as a menu, because it also stops when you actually hover it. If you make everything larger, it can serve as a website menu. Trust me, I've seen more elaborate menu effects that this.

On my website, I use it as a purely informational UX element. It shows some of the technologies used in the projects I showcase in the portfolio, in the form of technology logo and the title as a tooltip on icon hover.

Or you can make a stylized planet animation, for some website intro. Same goes for an atom model. The show-on-hover part is optional.

The modern web is in search of fluid, simple and nice looking effects. You can apply that to pretty much everything, the only limit is the imagination.
 

Accname

2D-Graphics enthusiast
Reaction score
1,462
Yeah, I would hate that. Its horrible for an interface, makes things more complicated instead of simple, probably not a nice thing for a slow old netbook either. Things like this make browsing a pain. Call me oldfashioned but I want my GUI to be plain and simple and most of all: plain and simple.
 

PurgeandFire

zxcvmkgdfg
Reaction score
509
Cool effect. It flickers a little bit on chrome though (for me), causing it to look a little weird. Runs just fine on safari though.
 

monoVertex

I'm back!
Reaction score
460
There's an image missing.

Hum, you are right. I'll fix that ASAP.

EDIT: fixed.

Cool effect. It flickers a little bit on chrome though (for me), causing it to look a little weird. Runs just fine on safari though.

Does it flicker when hovering the icon themselves or the rotation flickers in general?

Yeah, I would hate that. Its horrible for an interface, makes things more complicated instead of simple, probably not a nice thing for a slow old netbook either. Things like this make browsing a pain. Call me oldfashioned but I want my GUI to be plain and simple and most of all: plain and simple.

The ease of use depends on how it's implemented, really.

I tested in on my slow netbook and it runs just fine. I agree, the demo has a little lag, but there are 6 effects at the same time there. The beauty of it is that it's 99% CSS and browsers tend to render these effects faster and more efficient. If I would have done it in JS, it would have lagged badly.

I made the demo mainly to explain some techniques, to show that it can be done CSS-only and to show how can you fix some issues that arise when coding this. No one is forced to use the effect exactly in this form.
 

Accname

2D-Graphics enthusiast
Reaction score
1,462
Yes. I know what you mean. You just want to show it because you think its a cool effect.
But its not practical in my opinion. I wouldnt want that on a website. Icons hiding behind each other, spinning around, never being at the same spot where I last clicked them.
 

monoVertex

I'm back!
Reaction score
460
Yes. I know what you mean. You just want to show it because you think its a cool effect.
But its not practical in my opinion. I wouldnt want that on a website. Icons hiding behind each other, spinning around, never being at the same spot where I last clicked them.


That was my point, you can discard the animations if you want.

Placing the icons in a radial arrangement without JavaScript is tricky by itself and my tutorial shows how to do that as well.
 

rover2341

Is riding a roller coaster...Wee!
Reaction score
113
this just blows my mind. never knew css could do this....
I am to early in my practice of css to use your guide, as doing more basic exercises would help me more, and i am diving in to many other things..

But really cool to learn about less/sass while reading though how you did it. (If time...ill finish your guide and post my version of it :) )
 

monoVertex

I'm back!
Reaction score
460
To be honest, this guide assumes the reader has a relatively good grasp of CSS already. If you get stumped on anything, don't hesitate to ask.

And yes, LESS / SASS are the way to go in today's CSS coding. I would never code vanilla CSS anymore.
 
General chit-chat
Help Users
  • No one is chatting at the moment.
  • Varine Varine:
    I want to build a filtration system for my 3d printer, and that shit is so much more complicated than I thought it would be
  • Varine Varine:
    Apparently ABS emits styrene particulates which can be like .2 micrometers, which idk if the VOC detectors I have can even catch that
  • Varine Varine:
    Anyway I need to get some of those sensors and two air pressure sensors installed before an after the filters, which I need to figure out how to calculate the necessary pressure for and I have yet to find anything that tells me how to actually do that, just the cfm ratings
  • Varine Varine:
    And then I have to set up an arduino board to read those sensors, which I also don't know very much about but I have a whole bunch of crash course things for that
  • Varine Varine:
    These sensors are also a lot more than I thought they would be. Like 5 to 10 each, idk why but I assumed they would be like 2 dollars
  • Varine Varine:
    Another issue I'm learning is that a lot of the air quality sensors don't work at very high ambient temperatures. I'm planning on heating this enclosure to like 60C or so, and that's the upper limit of their functionality
  • Varine Varine:
    Although I don't know if I need to actually actively heat it or just let the plate and hotend bring the ambient temp to whatever it will, but even then I need to figure out an exfiltration for hot air. I think I kind of know what to do but it's still fucking confusing
  • The Helper The Helper:
    Maybe you could find some of that information from AC tech - like how they detect freon and such
  • Varine Varine:
    That's mostly what I've been looking at
  • Varine Varine:
    I don't think I'm dealing with quite the same pressures though, at the very least its a significantly smaller system. For the time being I'm just going to put together a quick scrubby box though and hope it works good enough to not make my house toxic
  • Varine Varine:
    I mean I don't use this enough to pose any significant danger I don't think, but I would still rather not be throwing styrene all over the air
  • The Helper The Helper:
    New dessert added to recipes Southern Pecan Praline Cake https://www.thehelper.net/threads/recipe-southern-pecan-praline-cake.193555/
  • The Helper The Helper:
    Another bot invasion 493 members online most of them bots that do not show up on stats
  • Varine Varine:
    I'm looking at a solid 378 guests, but 3 members. Of which two are me and VSNES. The third is unlisted, which makes me think its a ghost.
    +1
  • The Helper The Helper:
    Some members choose invisibility mode
    +1
  • The Helper The Helper:
    I bitch about Xenforo sometimes but it really is full featured you just have to really know what you are doing to get the most out of it.
  • The Helper The Helper:
    It is just not easy to fix styles and customize but it definitely can be done
  • The Helper The Helper:
    I do know this - xenforo dropped the ball by not keeping the vbulletin reputation comments as a feature. The loss of the Reputation comments data when we switched to Xenforo really was the death knell for the site when it came to all the users that left. I know I missed it so much and I got way less interested in the site when that feature was gone and I run the site.
  • Blackveiled Blackveiled:
    People love rep, lol
    +1
  • The Helper The Helper:
    The recipe today is Sloppy Joe Casserole - one of my faves LOL https://www.thehelper.net/threads/sloppy-joe-casserole-with-manwich.193585/
  • The Helper The Helper:
    Decided to put up a healthier type recipe to mix it up - Honey Garlic Shrimp Stir-Fry https://www.thehelper.net/threads/recipe-honey-garlic-shrimp-stir-fry.193595/
  • The Helper The Helper:
    Here is another comfort food favorite - Million Dollar Casserole - https://www.thehelper.net/threads/recipe-million-dollar-casserole.193614/

      The Helper Discord

      Members online

      No members online now.

      Affiliates

      Hive Workshop NUON Dome World Editor Tutorials

      Network Sponsors

      Apex Steel Pipe - Buys and sells Steel Pipe.
      Top