Interactive Drag and Drop Coloring ConceptMonday, April 27th, 2015

Articles, CSS, Jquery
InteractiveColoringConcept01

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…

Read more over at Codrops using the link below.

Source: Interactive Drag and Drop Coloring Concept

Like it? Share it!

Amit Thakrar

Amit is a web designer and developer with a passion for design, interaction and usability. In his free time if he's not at the gym he's traveling the world.

View all posts by: Amit Thakrar

Follow us on Google+


Leave a Comment

You can use these HTML tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>