From our sponsor: Chromatic - Visual testing for Storybook, Playwright & Cypress. Catch UI bugs before your users do.
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.
Here is how you drag the droplet to the content or text elements of the website mockup:
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
The end result is the coloring of the area with a fun animation:
Have a look at this animated GIF:
And now, go and have some fun coloring 😉
We really hope you enjoy this little effect and find it inspiring.
Hi Mary Lou, i wondered if I could use the same technique to choose topics instead of colors to create an interactive newsletter … in a drag and drop topics with a mix of other drag and drop techniques and forms…
Great work as always by the way !
Spike
Actually, this is increadible! Perfect for WordPress visual composer
Awesome work. you a greek when it comes to coding.
Amazing 🙂 . Thank you Mary Lou , in the future i want to develop the feature like WordPress Visual Composer with Asp.net MVC
This is future and how will apps works. Great demo.
Hi i want to know is there any way to apply color on 2 to 3 different div same time?
Awesome! Though, I was expecting code explanation in this article. 🙁
How ca I paint svg like this
WOW its great i very very like it..
Merci pour tout !
Hello Mary Lou
I am in love with this experiment. Is there any way in which we can export the change in CSS or save the changes.
I wanted to use this code in one of my template where the user can customize the colors and export the CSS.
Thanks You
This is great! Awesome tool. I’ve been wondering how to achieve drag and drop event things. Thanks