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

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

От автора: Привлекающий внимание эффект заливки для ваших иконок способен превратить простую страницу в классную и динамичную.

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

скачать исходникидемо

Источник вдохновения: несколько наших пользователей предложили нам взглянуть на красивое портфолио Элиота Кондона (Elliot Condon) и создать нечто похожее, вдохновившись эффектом заливки вертикальной временной шкалы. И мы сделали это! Другим великолепным примером, в котором применяется похожая техника, является страница с релизом новой версии Macaw 1.5.

Создаем структуру

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

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

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

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

<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>

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

Два закрашенных бокса, располагающихся под контентом, были созданы с помощью псевдо-элементов ::before и ::after у элемента body. Как видите, для одного из них я добавил CSS3 переход (transition), потому что мы собираемся изменить его цвет с помощью jQuery во время прокрутки контента. Для иконок всегда используем селектор ::before. Поскольку разделительная линия после иконок – еще один файл SVG – должна быть отзывчивой и изменять свою высоту в зависимости от контента, я также использовал для нее псевдо-элемент, добавив сверху отступ равный высоте иконки.

body::before, body::after {
  /* 2 нижние закрашенные области */
  content: '';
  position: fixed;
  /* хак, избавляющий от раздражающего мерцания в браузерах на движке webkit */
  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;
}
 
/*другие классы .new-color-n идут здесь*/

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

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

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

Автор: Sebastiano Guerriero

Источник: http://codyhouse.co/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. Iryna

    Прикольная фишка, беру себе на заметку)
    Спасибо.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree