Swatch Book with CSS3 & jQuery

Swatchbook

7 Responses

  1. Manoela Ilic Manoela Ilic

    Playing with skeuomorphism: a tutorial on how to create a swatch book like component with CSS3 + JS (jQuery plugin): http://goo.gl/3nqxF

    almost 2 years ago

  2. Timothy Whalin Timothy Whalin

    Beautiful animation and effect! Personally, I'd like to see a 5th demo in which you hover over the option to make it selected (the rest move away to reveal it) instead of requiring a click on the element to interact with it. This would allow a user to quickly browser what options are there vs having to click on it to interact and view what the color represents.

    Again, wonderful job!

    likes

    almost 2 years ago

  3. Manoela Ilic Manoela Ilic

    Hi Timothy! Thanks so much for your feedback! I've played with that but it's quite messy when using hover since you are basically always hovering over something here :) Another approach that I thought might be practical is to rotate the text -90 degrees and translateY -50px, so that you can actually see it with the items being closed... thx again and I'm really glad you like it! Cheers

    likes

    almost 2 years ago

  4. Timothy Whalin Timothy Whalin

    @Manoela Ilic What if they moved based on where the mouse was? As you move closer to another item, the "active" one disappears more and the new one becomes more apparent? So they are almost always "moving" until you activate one. Also, I know this is just a demo, but for "practicality" if this was a menu, a user would have to click once to view what the option was and click again if they wanted to actually go to that page.

    almost 2 years ago

  5. Wajco Wajco

    cool :)

    almost 2 years ago

  6. Ana Segota Ana Segota

    Great idea,love it :)

    over 1 year ago

  7. Mani Mani

    nice @Manoela Ilic +10 ;)

    over 1 year ago

keyboard shortcuts: previous shot next shot L or F like