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

在线演示      源码下载

　

您可能感兴趣的相关文章

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

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

Codrops 实验：使用 Vibrant.js 提取图像颜色的更多相关文章

  1. Gradify - 提取图片颜色，创建响应式的 CSS渐变

    被请求的HTTP对象之间的延迟会有一个时间段,这个期间网页看起来不完整.Gradify 可以分析出图像中4个最常见的颜色,创建一个梯度(或纯色)作为图片占位符.Gradify 可以在在任何图像发现最突 ...

  2. MATLAB·提取图像中多个目标

    基于matlab工具箱提取图像中的多目标特征(代码如下): 代码前面部分为提取图像的边界信息,调用了后面的遍历函数Pixel_Search,函数实现方法见后~ %%ROI Testing close ...

  3. JS实现随机颜色的3种方法与颜色格式的转化

    JS实现随机颜色的3种方法与颜色格式的转化   随机颜色和颜色格式是我们在开发中经常要用到的一个小功能,网上相关的资料也很多,想着有必要总结一下自己的经验.所以这篇文章主要介绍了JS实现随机颜色的3种 ...

  4. 【VS开发】图像颜色

    版权声明:本文为博主原创文章,转载请注明出处http://blog.csdn.net/lg1259156776/. 最近被图像颜色整的乱七八糟的,一会儿YUV422,一会儿RGB,一会儿gray... ...

  5. 关于更改MYECLIPSE JS 代码背景颜色

    白色的背景,看花了眼,你想改一下编辑器的背景颜色,移步这里就可以了. 这时你高兴的打开编辑器,发现颜色确实变了,但是当你打开有JS的JSP时,你碉堡了,发现JS的背景颜色还是默认的, 看着让人纠结,好 ...

  6. Android ColorMatrix类图像颜色处理-黑白老照片、泛黄旧照片、高对比度等效果

    在Android中,对图像进行颜色方面的处理,如黑白老照片.泛黄旧照片.高对比度.低饱和度等效果,都可以通过使用颜色矩阵(ColorMatrix)来实现. 1.颜色矩阵(ColorMatrix)介绍 ...

  7. js获取背景颜色

    //js获取背景颜色var Airport=$("#Airport").css('background-color'); js设置背景颜色 $("#intercity&q ...

  8. 原来CNN是这样提取图像特征的。。。

    对于即将到来的人工智能时代,作为一个有理想有追求的程序员,不懂深度学习(Deep Learning)这个超热的领域,会不会感觉马上就out了?作为机器学习的一个分支,深度学习同样需要计算机获得强大的学 ...

  9. js提取新浪邮箱的信用卡

    js提取用户新浪邮箱中的信用卡信息,是js非nodejs. 对比py,之前就做不好,出现了复杂点选验证码.js的开发速度只需要py的三分之一,甚至十分之一. js在客户端执行,py在后端执行,py要实 ...

随机推荐

  1. hibernate（二）annotation第一个示例

    一.在数据库中创建teacher表(数据库hibernate) create table teache( id int auto_increment primary key, name ), titl ...

  2. CSS三列布局

    × 目录 两侧定宽中间自适应 两列定宽一侧自适应 中间定宽两侧自适应一侧定宽两列自适应三列自适应总结 前面的话 前面已经介绍过单列定宽单列自适应和两列自适应的两列布局.本文介绍三列布局,分为两侧定宽中 ...

  3. Oracle身份认证方式

    Oracle对于普通账户和超级管理员(指sysdba和sysoper)的认证机制不一样,前者是通过数据字典,后者主要是通过操作系统验证和密码文件验证.因此一般提到操作系统认证或密码文件认证,针对的都是 ...

  4. SQL*Loader之CASE5

    CASE5 1. SQL脚本 [oracle@node3 ulcase]$ cat ulcase5.sql set termout off rem host write sys$output &quo ...

  5. [OpenCV] Samples 01: drawing

    基本的几何图形,标注功能. commondLineParser的使用参见:http://blog.csdn.net/u010305560/article/details/8941365 #includ ...

  6. Unity 3D制作2D游戏的几种方法

    1.使用本身UGUI. 2.把摄像机的投影改为正交投影,不考虑Z轴. 3.使用Untiy自身的2D模式. 4.使用2D TooKit插件.

  7. Linux - History

    history命令 打印所有命令记录:history 打印最近10条记录:history 10 执行第123条命令记录:!123 重复执行上一条命令:!! 执行最后一次以ls开头的命令:!ls 逐屏列 ...

  8. 使用 CSS3 制作一组超时尚的动画按钮效果

    通过 CSS3 的新特性,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一些 CSS3 动画按钮效果.我们的想法是创建一个具有不同风格的一些动画链接元素,鼠标悬停时有动画效果和活 ...

  9. LocationManager使用细节

    在使用系统的LocationManager请求地理位置的时候,请特别注意一个很小的细节,调用 requestLocationUpdates 以后,请记得[自己]设置一个timeout值,否则在某些情况 ...

  10. jQuery对象和DOM对象的相关知识

    所谓的DOM就是Document Object Model(文档对象模型)的缩写,或许是我水平低的缘故,感觉就是HTML的标记元素嘛,所以作者画了下面的图: 像这样的元素,就是所谓的DOM对象,获取值 ...