Автор

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

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


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

 

ДЕМО
ИСХОДНИКИ

 

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

 

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

Прежде чем погрузиться в код, я попытаюсь объяснить, что стоит за этим ресурсом. Там нет продвинутой техники 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, чтобы выделить его содержимое.

 

Вот и всё!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

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

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


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

Я уверен, что вы часто видели на различных веб-сайтах необычные эффекты при переходе между страницами, большинство из них создавалось с помощью JavaScript. В этом уроке я покажу, как вы можете создать свой собственный эфект перехода, но вместо JavaScript я буду использовать CSS Transition и свойство :target.


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

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


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

Добавление небольших деталей может придать Вашему сайту завершенности. jQuery это прекрасная JavaScript библиотека, которая поможет довести мельчайшие детали до совершенства.


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close