交互式拖放色彩渲染效果

一個很是有趣的前端設計實驗，能夠經過從調色板拖放色彩水滴來渲染頁面元素。

在線演示

今天咱們將和你分享一個有趣的交互式染色概念。這個設計理念就是簡單地從調色板拖放色彩水滴到須要染色的頁面內容區域。你可能以前使用過可自定義的工具，可是，咱們是想在這個基礎上增長一些有趣的東西，使用它更有樂趣地被使用。

如何使用它：你能夠從調色板拖曳一個顏色放到由藍色輪廓包圍的區域，包括文本元素。一旦你拖放了一個色彩水滴到某個區域，一個有趣的染色動畫以一個圓形隨之擴散開來，渲染整個選定的區域。爲了設計這個效果，咱們使用了SVG元素來實現色彩圓形的擴散並結合使用CSS來過渡消退。

你能夠點擊調色板工具條上的液滴圖標來重置全部的顏色。

爲了實現色彩拖放功能，咱們使用了絢麗的 interact.js 庫。

注意這只是一個實驗性的且只支持現代瀏覽器的效果，IE瀏覽器不支持SVG元素過渡，因此在IE瀏覽器上不能看到色圈擴散的效果。

在線演示