jQuery和css3炫酷SVG图标颜色过滤特效

svg 图标 2014-12-14

控件介绍
这是一款效果非常炫酷的jQuery和css3炫酷SVG图标颜色过滤特效。图标采用html5 svg制作,当鼠标向下滚动页面,图标的颜色会随着发生变化,就像颜色被过滤了一样。
浏览器兼容

支持IE9+

演示下载 501
使用方法

这个demo的灵感来自于 Elliot Condon beautiful portfolio 。这个网站的过滤效果用作垂直时间轴的图标上。还有一个效果是 Macaw 1.5 release page。

HTML结构

在开始之前先来分析一些原理,这里没有使用高深的CSS技术。都是通过创建合适的图标并控制它们的position。现在,重点是如何将你要过滤的部分放置在透明区域中,如下图:

html5 svg图标颜色过滤-1

为了让你看的更加明白,请看下面的gif图片:

html5 svg图标颜色过滤-2

htmlI结构只需要一个无序列表。

CSS样式

两个用于过滤的颜色盒子使用body的::before::after伪元素来制作。demo中为before伪元素添加了 CSS3 transition 。因为当鼠标滚动时我们要用jQuery来改变它的颜色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
body::before, body::after {
  /* the 2 underneath colored sections */
  content: '';
  position: fixed;
  /* trick to remove some annoying flickering on webkit browsers */
  width: 89.8%;
  max-width: 1170px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  height: 50%;
  z-index: -1;
}
  
body::before {
  top: 0;
  background-color: #f4bd89;
  transition: all 0.8s;
}
  
body::after {
  top: 50%;
  background-color: #71495b;
}
  
.cd-service {
  position: relative;
  z-index: 2;
  min-height: 50px;
  margin-left: 56px;
  background-color: #3e253c;
  padding: 1em 1em 4em;
}
  
.cd-service::before, .cd-service::after {
  content: '';
  position: absolute;
  width: 56px;
  right: 100%;
  z-index: 2;
}
  
.cd-service::before {
  top: 0;
  height: 50px;
  background-repeat: no-repeat;
}
  
.cd-service::after {
  top: 50px;
  bottom: 0;
  background-image: url("../img/cd-pattern-small.svg");
  background-repeat: repeat-y;
}
  
.cd-service.cd-service-1::before {
  background-image: url("../img/cd-icon-1-small.svg");
}
  
.cd-service.cd-service-2::before {
  background-image: url("../img/cd-icon-2-small.svg");
}
  
.cd-service.cd-service-3::before {
  background-image: url("../img/cd-icon-3-small.svg");
}
  
.cd-service.cd-service-4::before {
  background-image: url("../img/cd-icon-4-small.svg");
}

JAVASCRIPT

我们需要的效果是当鼠标向下滚动时SVG图标开始过滤颜色。为了做到这一点,对于每一个列表项.cd-service我们创建一个body下的伪元素:

1
2
3
4
5
6
7
body.new-color-1::before {
    background-color: #c06c69;
}
body.new-color-2::before {
    background-color: #bf69c0;
}
/*other classes .new-color-n here*/

也就是说,如果你有n个.cd-service列表项,你要为body创建(n-1)个上面的class。

当用户开始滚动鼠标,当第二个.cd-service-2在屏幕上可见时,我们希望图标颜色改变为第一种背景色,所以为body应用.new-color-1类。其他的也是同理操作。

最后,当一个新的.cd-section出现在屏幕上时,我们使用.focus 类来使它的内容高亮。

本文转载请注明出处:http://www.zhuiye.com/detail_30.html