有时候你可能想为你的某些页面创建一些特殊的效果,如关于我们,公司历史等。这个jQuery和css3炫酷图标颜色过滤特效能够帮助你完成这种效果。
这个demo的灵感来自于 Elliot Condon beautiful portfolio 。这个网站的过滤效果用作垂直时间轴的图标上。还有一个效果是 Macaw 1.5 release page。
HTML结构
在开始之前先来分析一些原理,这里没有使用高深的CSS技术。都是通过创建合适的图标并控制它们的position。现在,重点是如何将你要过滤的部分放置在透明区域中,如下图:
为了让你看的更加明白,请看下面的gif图片:
htmlI结构只需要一个无序列表。
CSS样式
两个用于过滤的颜色盒子使用body的::before和::after伪元素来制作。demo中为before伪元素添加了 CSS3 transition 。因为当鼠标滚动时我们要用jQuery来改变它的颜色。
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下的伪元素:
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 类来使它的内容高亮。