Codrops 实验:使用 Vibrant.js 提取图像颜色

简介:   Codrops 分享了一个有趣的颜色提取实验。这个想法是创建图像的调色板,既有图像本身的潜移默化的影响,也有一些花哨的颜色延伸。通过使用 Vibrant.js 来提取图像中的颜色,并通过 CSS 过滤器将图像转换为黑色和白色版本,还有一个“幕布”滑动的效果。

  Codrops 分享了一个有趣的颜色提取实验。这个想法是创建图像的调色板,既有图像本身的潜移默化的影响,也有一些花哨的颜色延伸。通过使用 Vibrant.js 来提取图像中的颜色,并通过 CSS 过滤器将图像转换为黑色和白色版本,还有一个“幕布”滑动的效果。

 

 

在线演示      源码下载

 

您可能感兴趣的相关文章

 

本文链接:Codrops 实验:使用 Vibrant.js 提取图像颜色

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

相关文章
|
数据采集 JavaScript 前端开发
Go和JavaScript结合使用:抓取网页中的图像链接
Go和JavaScript结合使用:抓取网页中的图像链接
|
5月前
|
机器学习/深度学习 前端开发 JavaScript
使用JavaScript精确裁剪图像的空白部分
【8月更文挑战第20天】
209 5
|
5月前
|
JavaScript 前端开发 数据可视化
图像裁剪库Cropper.js的学习使用
图像裁剪库Cropper.js的学习使用
82 4
|
6月前
|
JavaScript
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
|
6月前
|
JavaScript
js 生成随机数(含随机颜色)
js 生成随机数(含随机颜色)
44 0
|
7月前
|
JavaScript 前端开发
JavaScript 计算颜色的相对亮度,并确定相应的文本颜色
JavaScript 计算颜色的相对亮度,并确定相应的文本颜色
72 0
|
JavaScript
jQuery jquery.color.js 背景颜色支持动画
jQuery jquery.color.js 背景颜色支持动画
109 0
|
8月前
|
Web App开发 存储 数据可视化
编程笔记 html5&css&js 029 HTML图像
编程笔记 html5&css&js 029 HTML图像
|
8月前
|
前端开发
编程笔记 html5&css&js 018 HTML颜色
编程笔记 html5&css&js 018 HTML颜色
|
前端开发 JavaScript
使用 JavaScript 和 CSS 的随机颜色生成器
使用 JavaScript 和 CSS 的随机颜色生成器
146 0