От автора: Привлекающий внимание эффект заливки для ваших иконок способен превратить простую страницу в классную и динамичную.
Иногда вам просто хочется сделать что-нибудь классное. Возможно, это будет одна из тех страниц – «О нас», «Наша история» и т.д. – на которой вы захотите сделать что-то уникальное для представления вашего бренда. Данный эффект поможет вам создать классную веб-страницу с помощью всего нескольких иконок.
Источник вдохновения: несколько наших пользователей предложили нам взглянуть на красивое портфолио Элиота Кондона (Elliot Condon) и создать нечто похожее, вдохновившись эффектом заливки вертикальной временной шкалы. И мы сделали это! Другим великолепным примером, в котором применяется похожая техника, является страница с релизом новой версии Macaw 1.5.
Создаем структуру
Прежде чем погрузиться в написание кода, я постараюсь объяснить, какой принцип лежит в основе этого приема. Здесь не используется какой-либо продвинутой CSS техники. Здесь все вертится вокруг создания правильных файлов/иконок и игры с позиционированием элементов. Я начал с создания нескольких иконок с нуля в Adobe Illustrator. И здесь очень важно было сделать прозрачной ту область иконки, которую необходимо впоследствии закрасить:
Таким образом, все, что вам нужно – это просто поместить иллюстрации над закрашенной областью и затем перемещать их. В нашем конкретном случае иконки движутся вместе со скроллингом страницы, закрашенным боксам задано фиксированное позиционирование, и они находятся под иконками.
Для того чтобы быть уверенным, что вам все понятно на 100%, я создал небольшую gif’ку, чтобы показать вам сам анимационный процесс:
И в нашем случае структура представляет собой ненумерованный список. Я создал два пустых элемента списка, чтобы создать больше пустого пространства над и под контентом.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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 – должна быть отзывчивой и изменять свою высоту в зависимости от контента, я также использовал для нее псевдо-элемент, добавив сверху отступ равный высоте иконки.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
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:
|
1 2 3 4 5 6 7 8 9 |
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
Источник: //codyhouse.co/
Редакция: Команда webformyself.
Комментарии (1)