[Tutorial][CSS] Spinning Wheel

monoVertex

I'm back!
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:



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

Accname

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

monoVertex

I'm back!
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
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
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!
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
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!
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!
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!
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:
    They aren't cutting my responsibilities or interjecting in my management abilities or anything, it's just stupid shit that comes up. And they don't exactly have people lining up for my job, there's not that many people applying for the positions I hire
  • Varine Varine:
    Eh, whatever. Thanks for listening guys
  • jonas jonas:
    Sure :) Let us know how it ends
  • Varine Varine:
    All of these things will end happily, they're just stressful. And I still lack many good friends that I can go to, and the ones I can are preoccupied with similar things. Thus general chit chat, cuz for some reason TH and Ghan and Tom all actively keep it up.
  • Varine Varine:
    Just gotta keep Miss Mazie up through the week until her shock wears off and she realizes that she still has family all around her, and bossman will do whatever he's going to do and I'll respond appropriately when it happens. Thank you all for the support, I do very much appreciate everyone being here for me through the years
    +3
  • vypur85 vypur85:
    Best of luck Varine!
  • vypur85 vypur85:
    I just gotten myself an offer to work in China. The pay quadruples my current one. Damn.... Not really ready to start a new life there in China.
  • The Helper The Helper:
    I have heard that they pay pretty good to English teachers in China - you would be an expat
  • jonas jonas:
    Cool, what kind of job?
  • Accname Accname:
    I would be careful with jobs in China. They can be hit and miss depending on where in China you go. Places like hong kong / Shengzen / Beijing can be neat. Other places not so much.
  • Accname Accname:
    I would recommend searching for some first person experiences for the city you got the offer in. Especially now when the political situation in China is deteriorating.
  • jonas jonas:
    Accname, long time no see
  • jonas jonas:
    What have you been up to
  • tom_mai78101 tom_mai78101:
    Hey Accname, welcome back.
  • Accname Accname:
    Not much. Working in the Renewable Energy Sector as an IT Consultant. Its okay, but I think I preferred working at the university. It was more relaxed and you met all kinds of crazy people there.
  • vypur85 vypur85:
    I gotten a teaching position for Biology in a college in Wuhan (yes, there)... I suppose it should be fine there (I hope). Many of my ex colleagues are teaching in China as well currently (none in Wuhan though)
  • vypur85 vypur85:
    And I signed the contract already. I guess there's no turning back....
  • jonas jonas:
    @Accname how many hours do you work? I heard in some sectors IT consultants rack up insane hours
  • jonas jonas:
    @vypur85 sounds nice, have fun : )
  • Accname Accname:
    I am supposed to work 40 hrs a week, but I can work more if I like and I will be paid for those hours (as long as I don't go too far, there are laws and company policies, etc)
  • Accname Accname:
    In practice its basically work as much as you like, as long as the job gets done in time.
  • jonas jonas:
    Haha, my job is like that as well... that usually means I have a few 70-80 hours weeks a year, and lots of 20 hours weeks...
  • jonas jonas:
    a few weeks ago, one of my friends basically said "jonas, I received an invitation to submit something to conference X but I'm too lazy to do it and also the conference isn't advanced enough for my high level of research*, why don't you write something? Oh by the way, the deadline is in two weeks. Enjoy!" so I got two 80 hour weeks out of that kind offer. (*of course he didn't say those parts, but it's a better story this way)
  • jonas jonas:
    now I'll have next week off to make up for overtime :p and I'll play some good old gothic 2
  • The Helper The Helper:
    Hope you are enjoying that gothic 2~

    Members online

    Affiliates

    Hive Workshop NUON Dome
    Top