Автор

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

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

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


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

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


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

Здесь можно бесплатно воспользоваться готовыми примерами блочной css верстки слоями. Каждый шаблон ниже содержит готовую резиновую и не резиновую верстку в две или три колонки с различным расположением. Во всех верстках css footer прижат к низу. Каждая div, блочная, дивная верстка валидна и проверена на кроссбраузерность.


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close