Ефект заливки іконок

17

Від автора: Привертає увагу ефект заливки для ваших іконок здатний перетворити просту сторінку в класну і динамічну.

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

Ефект заливки іконокЕфект заливки іконок

Джерело натхнення: кілька наших користувачів запропонували нам поглянути на гарне портфоліо Еліота Кондона (Elliot Condon) і створити щось схоже, надихнувшись ефектом заливки вертикальної тимчасової шкали. І ми зробили це! Іншим чудовим прикладом, у якому застосовується схожа техніка, є сторінка з релізом нової версії Macaw 1.5.

Створюємо структуру

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

Ефект заливки іконок

Таким чином, все, що вам потрібно – це просто помістити ілюстрації над зафарбованої областю і потім переміщати їх. У нашому конкретному випадку іконки рухаються разом зі скролінгом сторінки, замальованою боксів задано фіксоване позиціонування, і вони знаходяться під іконками.

Для того щоб бути впевненим, що вам все зрозуміло на 100%, я створив невелику gif’ку, щоб показати вам сам анімаційний процес:

Ефект заливки іконок

І в нашому випадку структура являє собою ненумерованний список. Я створив два порожніх елементу списку, щоб створити пустий простір над і під контентом.

  • Web Design

    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!

Додаємо стилі

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

body::before, body::after {
/* 2 нижні зафарбовані області */
content: «;
position: fixed;
/* хак, рятує від дратівної мерехтіння в браузерах на движку webkit */
ширина: 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.8 s;
}
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, щоб підсвітити вміст поточної області.