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. Enterprise Solution 应用程序开发框架培训

    一.系统架构 C# .NET 4.0 + Win Form + SQL Server 2005 二.五大核心模块 (菜单设计器Menu Designer,查询设计器Query Designer,报表设 ...

  2. js对象私有变量公有变量问题

    0 js对象私有变量公有变量问题5 小弟初学JS面向对象编程 现有一问题 请教各位大虾: Person=function (){ //私有变量定义 var name; vae age; var Ale ...

  3. CSS旧版flex及兼容

    × 目录 [1]适用范围 [2]伸缩项目 [3]伸缩流方向[4]伸缩流换行[5]主轴对齐[6]伸缩性[7]显示顺序[8]flex兼容 前面的话 flex弹性盒模型有3个版本: 旧版本.混合版本和新版本 ...

  4. sublime简要笔记

    选中单词 [1]选中当前单词 ctrl+d [2]跳过当前单词 ctrl+k ctrl+d [3]选中相同的所有单词 alt+f3 [4]多行游标 按住shift,然后按住鼠标右键向下拖动 行操作 [ ...

  5. AngularJs ui-router 路由的简单介绍

    之前有写过一篇关于Angular自带的路由:ngRoute.今天来说说Angular的第三方路由:ui-router.那么有人就会问:为什么Angular有了自带的路由,我们还需要用ui-router ...

  6. jQuery判断当前元素显示状态并控制元素的显示与隐藏

    1.jQuery判断一个元素当前状态是显示还是隐藏 $("#id").is(':visible');   //true为显示,false为隐藏 $("#id") ...

  7. 机器学习&数据挖掘笔记_25（PGM练习九：HMM用于分类）

    前言: 本次实验是用EM来学习HMM中的参数,并用学好了的HMM对一些kinect数据进行动作分类.实验内容请参考coursera课程:Probabilistic Graphical Models 中 ...

  8. Cool！15个超炫的 CSS3 文本特效【上篇】

    每一个网页设计师都希望创建出让用户能够赏识的网站.当然,这是不可能满足每个人的口味的.幸运的是,我们有最强大的工具和资源.实际上,我们非常多的网站模板,框架,内容管理系统,先进的工具和其他的资源可以使 ...

  9. 从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别

    背景: 在清空input file标签选中值时,分别用了以下方法,发现有的对有的错: [√]$("#file")[0].value = ""; [√]$(&qu ...

  10. 基于HT for Web 3D技术快速搭建设备面板

    以真实设备为模型,搭建出设备面板,并实时获取设备运行参数,显示在设备面板上,这相比于纯数值的设备监控系统显得更加生动直观.今天我们就在HT for Web的3D技术上完成设备面板的搭建. 我们今天模拟 ...