Zwar gibt es bereits einige Customization-Tools auf dem Markt, allerdings sind sie in ihrer Nutzung meist eher langweilig und wenig unterhaltsam. Das Codrops-Team hat darum mit dem Drag and Drop Coloring Concept ein neues, derzeit noch experimentelles Tool vorgestellt, bei dem ein Seiten-Mockup interaktiv per Drag-und-Drop mit verschiedenen Farben eingefärbt werden kann.

Features des interaktiven Drag and Drop Coloring Concepts

Die Funktionsweise des Drag and Drop Coloring Concepts ist simpel. Aus einer Farbpalette kann einfach eine Farbe ausgewählt und per Drag-and-Drop in einem bestimmten Bereich des Website-Mockups platziert werden. Davon eingeschlossen sind sowohl Content-Bereiche inklusive Text-Elemente, als auch andere Elemente, wie zum Beispiel die Navigationsleiste.

Besonders ansprechend ist das Drag and Drop Coloring Concept durch seine Animation, die beim Platzieren eines Farbtupfers ausgeführt wird. Sie wird mithilfe von SVG-Elementen und CSS-Transitions durchgeführt; für die Drag-and-Drop-Funktionalität kommt die JavaScript-Library interact.js zum Einsatz, die wir euch an anderer Stelle bereits ausführlicher vorgestellt haben.

Derzeit ist das Drag and Drop Coloring Concept noch sehr experimentell und steht nur für die Nutzung in einem modernen Browser bereit. Mehr Informationen zu dem Coloring Concept finden sich im zugehörigen Artikel im Codrops-Blog oder auf GitHub; eine Demo zeigt, wie es in Aktion funktioniert.

Aufmacherbild: Press color management – cmyk palette von Shutterstock / Urheberrecht: zefart