Эффект заливки иконок на CSS3 и jQuery

Эффектный эффект наполнения ваших значков, который можно использовать для создания простой страницы, выглядит круто и динамично.

 

ДЕМО

ИСХОДНИКИ

 

Иногда вы просто хотите создать что-то классное. Возможно, для одной из этих страниц - о нас, нашей истории и т.д. - где вы хотите придумать что-то уникальное для поддержки своего бренда. Этот эффект может помочь вам создать классную веб-страницу с несколькими значками.

 

Создание структуры

Прежде чем погрузиться в код, я попытаюсь объяснить, что стоит за этим ресурсом. Там нет продвинутой техники CSS, это все о создании правильных активов / значков и игре с позиционированием элементов. Я начал с создания значков с нуля в Adobe Illustrator. Теперь важно сделать прозрачную область значка, который вы хотите заполнить:

Таким образом вам просто нужно поместить иллюстрации поверх цветной секции, а затем переместить их. В нашем конкретном случае значки перемещаются с прокруткой страницы, цветные прямоугольники находятся в фиксированном положении внизу.

Чтобы убедиться, что это на 100% ясно, предлагаю пример, чтобы показать вам процесс анимации:

Тем не менее, структура является просто неупорядоченным списком. Я создал 2 пустых элемента списка, которые будут использоваться для создания большего количества места сверху и снизу содержимого.

<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..........</p>
 </li> <!-- cd-service -->
 
 <li><!-- ... --></li>
 
 <li class="cd-service cd-service-divider"></li>
</ul>

 

Добавление стиля

2 цветных прямоугольника внизу были созданы как ::before и ::after псевдоэлементов тела. Как вы можете видеть, я добавил переход CSS3 к одному из них, потому что мы собираемся изменить его цвет в jQuery, пока содержимое прокручивается. Значки всегда ::before селекторами. Поскольку разделительная линия под значками - другой .svg-файл - должна реагировать и изменять ее высоту в соответствии с содержимым, я добавил ее также как псевдоэлемент, с расстоянием от вершины, равным высоте значка.

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:

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

Это означает, что если у вас есть элементы списка .cd-service, вам нужно создать (n-1) классы для тела.

Когда пользователь начинает прокручивать, как только в окне просмотра отображается значок .cd-service-2, мы хотим, чтобы значки, заполняющие цвет, менялись (это первое изменение цвета заполнения), поэтому мы назначаем класс .new-color-1 телу , То же самое делается для всех остальных разделов .cd-service-n.

Наконец, когда в окне просмотра отображается новый .cd-section, мы назначаем ему класс .focus, чтобы выделить его содержимое.

 

Вот и всё!

---