Sometimes you just want to create something cool. Maybe for one of those pages - about us, our history etc - where you want to come up with something unique to support your brand. This effect can help you design a cool web page with just a few icons.

The inspiration: some of our users suggested us to take a look at Elliot Condon beautiful portfolio, and create something inspired by the filling effect of the vertical timeline. We did it!

Creating the structure

Before diving into the code, I'm gonna try to explain what's behind this resource. There's no advanced CSS technique, it's all about creating the right assets/icons and play with elements positioning. I started by creating some icons from scratch in Adobe Illustrator. Now what's important is to make transparent the area of the icon you want to fill:

This way you just need to place the illustrations on top of a colored section, then move them. In our specific case the icons move with the scrolling of the page, the colored boxes are in fixed position, underneath.

Just to make sure this is 100% clear, I put together this quick animation to show you the animation process:

That said, the structure is just an unordered list. I created 2 empty list items that will be used to create more space on top and at the bottom of the content.

<ul class="cd-icons-filling js-cd-icons-filling">
   <li class="cd-service cd-service--divider"></li>

   <li class="cd-service cd-service--1 js-cd-service">
      <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 class="cd-service cd-service--2 js-cd-service"><!-- ... --></li> <!-- cd-service -->

   <!-- ... -->

   <li class="cd-service cd-service--divider"></li>
</ul> <!-- cd-services -->

Adding style

The 2 colored boxes underneath have been created as ::before and ::after pseudo-elements of the .cd-icons-filling element. As you can see, I added a CSS3 transition to one of them, because we are going to change its color in JavaScript while the content is scrolling. The icons are always ::before selectors. Since the separation line below the icons - another .svg file -  has to be responsive and change its height according to the content, I added it as a pseudo-element too, with a distance from the top equal to the icon height.

.cd-icons-filling::before, .cd-icons-filling::after {
  /* the 2 underneath colored sections */
  content: '';
  position: fixed;
  /* trick to remove flickering on resize */
  width: calc(90% - 2px);
  max-width: 1170px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  height: 50vh;
  z-index: -1;
}

.cd-icons-filling::before {
  top: 0;
  background-color: #f4bd89;
  transition: all 0.8s;
}

.cd-icons-filling::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--divider::after {
  top: 0;
}

.cd-service.cd-service--divider:last-child {
  display: none;
}

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

Events handling

The additional effect we wanted to achieve is the change of the filling color while scrolling. In order to do that, for each .cd-service list-item we created a class for the .cd-icons-filling element:

.cd-icons-filling.cd-icons-filling--new-color-1::before {
  background-color: #c06c69;
}

.cd-icons-filling.cd-icons-filling--new-color-2::before {
  background-color: #bf69c0;
}

/*other classes .cd-icons-filling--new-color-n here*/

It means that, if you have n .cd-service list items , you have to create (n-1) classes for the .cd-icons-filling element.

When a user starts scrolling, as soon as the .cd-service--2 is visible in the viewport we want the icons filling color to change (that's the first filling color change) so we assign the .cd-icons-filling--new-color-1 class to the .cd-icons-filling element. The same is done for all the other .cd-service-n sections.
Finally, when a new .cd-section is visible in the viewport, we assign it the .cd-service--focus class to highlight its content.