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

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

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

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

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

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

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

Обработка событий

Дополнительный эффект, которого мы хотим добиться – это замена цвета заливки во время скроллинга. Для того чтобы сделать это, для каждого элемента списка с классом .cd-service мы создали отдельный класс для элемента body:

Это означает, что если у вас есть 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 за ближайшие 6 дней

Узнать подробнее

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

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

Получить

Метки: ,

Похожие статьи:

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

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

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

  1. Iryna

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree