[Tutorial][CSS] Spinning Wheel

Discussion in 'General Webmaster Support' started by monoVertex, Oct 8, 2013.

  1. monoVertex

    monoVertex I'm back!

    Ratings:
    +459 / 0 / -0
    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:

    [​IMG]

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

    Accname 2D-Graphics enthusiast

    Ratings:
    +1,551 / 4 / -4
    Looks nice on one hand, and useless on the other. I dont know what good this would ever be.
     
  3. monoVertex

    monoVertex I'm back!

    Ratings:
    +459 / 0 / -0
    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.
     
  4. Accname

    Accname 2D-Graphics enthusiast

    Ratings:
    +1,551 / 4 / -4
    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.
     
  5. PurgeandFire

    PurgeandFire zxcvmkgdfg

    Ratings:
    +513 / 0 / -0
    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.
     
  6. tom_mai78101

    tom_mai78101 The Helper Connoisseur / Ex-MineCraft Host Staff Member

    Ratings:
    +984 / 4 / -1
    [​IMG]

    There's an image missing.
     
  7. monoVertex

    monoVertex I'm back!

    Ratings:
    +459 / 0 / -0
    Hum, you are right. I'll fix that ASAP.

    EDIT: fixed.

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

    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.
     
  8. Accname

    Accname 2D-Graphics enthusiast

    Ratings:
    +1,551 / 4 / -4
    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.
     
  9. monoVertex

    monoVertex I'm back!

    Ratings:
    +459 / 0 / -0

    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.
     
  10. rover2341

    rover2341 Is riding a roller coaster...Wee!

    Ratings:
    +114 / 0 / -0
    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 :) )
     
  11. monoVertex

    monoVertex I'm back!

    Ratings:
    +459 / 0 / -0
    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.
     

Share This Page