Icons Filling Effect (Icons 填充效果）

前言

原文来源:这里

作者: Sebastiano Guerriero

译者: 临水照影

正文之前

这个效果好像也是蛮早的了，不过正好要用到，于是进行翻译整理。

正文

为了你的Icons添加一个吸引人的填充效果，它将使单页更加的看起来酷。

有些时候你只是想要创建一些很酷的东西，或许是一些你想制作一些独特风格的单页，这个效果能帮你通过一些小图标来使你的网页更加炫酷。

灵感来源：Elliot Condon beautiful portfolio

创建结构

在写代码之前，我将介绍一下原理。最重要的一点是使你想要填充图标的区域是透明的。

img1

我们的处理方式是Icons跟随页面的scroll移动，颜色层是固定不变的。

为了100%说明这一点，看下图：

img2

这说明，这个结构只是一个无序的列表，我创建两个空列表项来让顶部和底部有更多的空间。

<ul>
	<li class="cd-service cd-service-divider"></li>
 
    <li class="cd-service cd-service-1">
    	<h2>Web Design</h2>
    	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis pariatur tenetur quod veritatis nulla aspernatur architecto! Fugit, reprehenderit amet deserunt molestiae ut libero facere quasi velit perferendis ullam quis necessitatibus!</p>
    </li> <!-- cd-service -->
 
    <li><!-- ... --></li>
 
    <li class="cd-service cd-service-divider"></li>
</ul>

添加style

我们在body中用两个伪元素::before和::after来创建作为颜色box。正如你所见，我添加了css3 过渡属性，因为我们需要用jquery在内容页用滚动的时候改变颜色。图标总是::before选择器来创建。

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");
}

事件绑定

另一个我们想要完成的是效果是当滚动时改变填充颜色。

为了完成这个效果，对于每一个.cd-service列表项都创建一个背景颜色。

body.new-color-1::before {
	background-color: #c06c69;
}
 
body.new-color-2::before {
	background-color: #bf69c0;
}

这意味着，如果你有n个列表项，你需要创建n-1个样式。

当用户开始滚动，当滚动到.cd-service-2，我们分配.new-cokor-1给body。以此类推。

最后，当一个新的.cd-section在视图中可见，我们分配.focus来高亮内容。

译者

codyhouse作者讲的都是流程，大概在他们眼中，给个思路就够了。。。事实上，原文其实有demo还有下载地址。自己去下载并分析源码然后复现效果这才是学习该效果最好方式。后续我可能还会贴类似效果的翻译。基本上都能在原文中找到源码。

Table of Contents