Interactive Drag and Drop Coloring Concept

A little fun experiment where you can color a website mockup by dragging and dropping a color droplet from a palette.
ColoringConcept

From our sponsor: Jamf Now sets up and secures your team's Apple devices so you can get back to more creative work.

Today we would like to share a fun interactive coloring concept with you. The idea is to simply drag a color from a color palette to a website mockup and color designated areas of it (like sections or texts). You might have encountered customization tools before, but we wanted to add some fun to this idea and make it enjoyable to use.

And this is how it can be used: you can drag a color from the color palette and drop it on any area that lights up with a blue outline, including text elements. Once the droplet that you are dragging gets dropped on a content area, a fun little Google Material like animation happens and the whole area gets filled with a colored circle. For that effect we use an SVG element that we create on the fly and then scale it up and fade it in with a CSS transition.

You can reset the whole thing by clicking on the droplet icon in the palette toolbar.

For the drag and drop functionality we are using the brilliant interact.js library.

Please note that this is highly experimental and only ready for modern browsers. IE does not support transitions on SVG elements so you won’t see the colored circle expanding.

Here is how you drag the droplet to the content or text elements of the website mockup:

InteractiveColoringConcept01

The end result is the coloring of the area with a fun animation:

InteractiveColoringConcept02

Have a look at this animated GIF:

coloring_concept

And now, go and have some fun coloring ๐Ÿ˜‰

We really hope you enjoy this little effect and find it inspiring.

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 64

Comments are closed.
  1. I’ve literally never been more envious of someone’s ability to be consistently original, brilliantly technical and amazingly creative. Mary, Thank you! This is epic. You’re an inspiration to me and all the front end developers I’ve ever worked with.

  2. That’s pretty cool. Could work with font sizes too I guess? Why aren’t you building site tools like this for some coin???

  3. Thank you all for your kind feedback ๐Ÿ™‚ I’m really happy you like it ๐Ÿ™‚ Cheers, ML

  4. Just amazing. Can see a freelancer using this for initial branding meetings. Thanks a lot.

  5. Incredible! A question though – what framework was used to create the demo HTML? I notice it’s RWD and would have been silly to custom code that just for this demo. Or does the developer have a standard site they have created that they always use for Codrops demos?

    Thanks!

  6. Would it be possible to drop in images instead of colors? Could someone point me in the right direction to getting that working?