Vibrant.js相册图片颜色提取变成黑白图片效果



113 449 150



特效描述:Vibrant.js 相册图片 颜色提取 变成黑白图片效果,js颜色提取,图片颜色提取,相册颜色提取,制作黑白图片。

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.3.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />

2. 引入JS

<script type="text/javascript" src="js/modernizr.custom.js"></script>
<script type="text/javascript" src="js/classie.js"></script>
<script type="text/javascript" src="js/Vibrant.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

3. HTML代码

<svg viewBox="0 0 640 360" class="hidden">
	<filter id="grayscale">
		<feColorMatrix type="saturate" values="0"/>
	</filter>
</svg>
<div class="container">
	<div style="height:40px;"></div>
	<div class="content">
		<div id="slider" class="slider">
			<div class="slider__item slider__item--current">
				<img class="slider__img" src="img/1.jpg" alt="img01" />
			</div>
			<div class="slider__item">
				<img class="slider__img" src="img/2.jpg" alt="img02" />
			</div>
			<div class="slider__item">
				<img class="slider__img" src="img/3.jpg" alt="img03" />
			</div>
			<div class="slider__item">
				<img class="slider__img" src="img/4.jpg" alt="img04" />
			</div>
			<div class="slider__item">
				<img class="slider__img" src="img/5.jpg" alt="img05" />
			</div>
			<div class="slider__item">
				<img class="slider__img" src="img/6.jpg" alt="img06" />
			</div>
			<div class="slider__item">
				<img class="slider__img" src="img/7.jpg" alt="img07" />
			</div>
			<nav class="slider__nav-wrap">
				<button class="slider__nav slider__nav--prev"><i class="fa fa-angle-left"></i><span class="text-hidden">Previous</span></button>
				<button class="slider__nav slider__nav--next"><i class="fa fa-angle-right"></i><span class="text-hidden">Next</span></button>
			</nav>
		</div><!-- /slider -->
		<div class="tools">
			<button class="button-color"><i class="fa fa-eyedropper"></i><span class="text-hidden">Extract</span></button>
			<ul class="palette">
				<li class="palette__item">
					<div class="palette__inner">
						<div class="palette__fill"></div>
						<i class="icon fa fa-tint"></i>
						<div class="palette__name">
							<span class="palette__value palette__value--default">#######</span>
							<span class="palette__value palette__value--real">#######</span>
						</div>
					</div>
					<i class="drop drop--1"></i>
					<i class="drop drop--2"></i>
					<i class="drop drop--3"></i>
					<i class="drop drop--4"></i>
				</li>
				<li class="palette__item">
					<div class="palette__inner">
						<div class="palette__fill"></div>
						<i class="icon fa fa-tint"></i>
						<div class="palette__name">
							<span class="palette__value palette__value--default">#######</span>
							<span class="palette__value palette__value--real">#######</span>
						</div>
					</div>
					<i class="drop drop--1"></i>
					<i class="drop drop--2"></i>
					<i class="drop drop--3"></i>
					<i class="drop drop--4"></i>
				</li>
				<li class="palette__item">
					<div class="palette__inner">
						<div class="palette__fill"></div>
						<i class="icon fa fa-tint"></i>
						<div class="palette__name">
							<span class="palette__value palette__value--default">#######</span>
							<span class="palette__value palette__value--real">#######</span>
						</div>
					</div>
					<i class="drop drop--1"></i>
					<i class="drop drop--2"></i>
					<i class="drop drop--3"></i>
					<i class="drop drop--4"></i>
				</li>
				<li class="palette__item">
					<div class="palette__inner">
						<div class="palette__fill"></div>
						<i class="icon fa fa-tint"></i>
						<div class="palette__name">
							<span class="palette__value palette__value--default">#######</span>
							<span class="palette__value palette__value--real">#######</span>
						</div>
					</div>
					<i class="drop drop--1"></i>
					<i class="drop drop--2"></i>
					<i class="drop drop--3"></i>
					<i class="drop drop--4"></i>
				</li>
				<li class="palette__item">
					<div class="palette__inner">
						<div class="palette__fill"></div>
						<i class="icon fa fa-tint"></i>
						<div class="palette__name">
							<span class="palette__value palette__value--default">#######</span>
							<span class="palette__value palette__value--real">#######</span>
						</div>
					</div>
					<i class="drop drop--1"></i>
					<i class="drop drop--2"></i>
					<i class="drop drop--3"></i>
					<i class="drop drop--4"></i>
				</li>
			</ul>
		</div><!-- /tools -->
	</div>
</div><!-- /container -->



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滚动切换 滑动选项卡切换 选项卡切换 滑动手风琴 切换按钮 表单 图片滑动 图片切换 选项卡自动切换 颜色选择

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到